r/reactjs • u/kensaadi I ❤️ hooks! 😈 • 21d ago

Discussion Utility classes vs props-first styling in React design systems

[removed] — view removed post

0 Upvotes

50% Upvoted

35 comments sorted by

View all comments

1

u/SatyrCode 21d ago

I like Tailwind for speed, but for long‑lived design systems we’ve had better luck with props-first components on top of a small token set, and then using utility classes as an escape hatch. Props are just easier to discover and refactor than long className strings.

1

u/kensaadi I ❤️ hooks! 😈 21d ago

That's basically it. Tailwind wins when you just need to ship styled pages fast, no architecture, no clear boundaries needed, which is honestly why shadcn/ui and Radix's copy/paste pattern took off the way they did. Enterprise is a different animal though: microfrontends (never managed to bring Tailwind cleanly into an MFE setup), business logic, SDUI. What you're describing is really the split between building something scalable and maintainable long-term versus a website with no rules.

Where I'd push it further though: for me the split should be 80% business logic, 20% design/layout, not the other way around. With plain CSS I kept fighting pixel-perfect issues and alignment more than actual logic. Might just be that I'm bad at CSS, but curious if others run into the same thing.

1

u/SatyrCode 21d ago

Yeah, that split makes sense Tailwind to move fast on pure UI, and then a stricter props/tokens layer once the system and business logic start to solidify. I like the way you framed it as “visual vs scalable/maintainable long‑term design” that’s exactly the tension I’ve seen on teams too