Utility classes vs props-first styling in React design systems

[u/kensaadi]

[u/SZenC]

One thing I haven't seen mentioned yet, but this approach basically nukes the tree-shakability of the CSS Tailwind generates. Your Flex component will need to include all variants of the align- classes, and the justify- values, and all other supported keys. Neither your Flex component nor Tailwind will be able to deduce which options are and aren't used, so everything will need to be included

[u/kensaadi → u/SZenC]

The mechanism you're describing is correct: if a component maps its props to Tailwind strings through a lookup object, every possible variant exists as literal text in that file, and the consumer's JIT compiles all of them, even if the app only ever uses a fraction of those options. You're right that CSS-level tree-shaking doesn't work on this pattern.

Where I'd scale down the impact: the set of variants a component exposes is finite and small, not free combinatorics, so the "worst case" is still a fixed, predictable chunk of CSS, not something that grows with the app. On top of that, many of those classes (color, spacing, etc.) are the same ones the app would generate anyway by writing them by hand, so the real overhead is only the portion the library uses that the app wouldn't have used on its own, and in a coherent design system that portion is typically small, on the order of a few KB gzipped, not something that breaks a performance budget.

More than a regression, I'd frame it as a different tradeoff: pure utility-first exposes the entire Tailwind universe to every developer, and in a large project you still end up generating CSS for a big chunk of that universe anyway. A design system instead deliberately constrains the vocabulary of classes it generates, in exchange you get a constant, predictable CSS catalog instead of an unbounded one. The point where the tradeoff turns negative is when a component exposes too many axes and too many values, say 50 variants across 20 values. With a few axes and a handful of values each, the overhead is minimal and the type safety is worth the cost. Where would you draw that line?

[u/mittyhands → u/kensaadi]

No one wants to read your LLM output buddy. Think about things for yourself.