Scenario 01
If you want fast UI development with consistent tokens and no context switching…
Tailwind CSS keeps styling in the markup and the design tokens in one config.
Comparison: Tailwind CSS vs. CSS Modules / Vanilla Extract
Tailwind CSS vs. CSS Modules vs. Vanilla Extract
Compare utility-first styling with scoped CSS and zero-runtime TypeScript styling for modern component design systems.
Decision framework
Which one fits your situation
Scenario 02
If you want type-safe styles compiled at build time, without utility classes…
Vanilla Extract gives you zero-runtime CSS written in TypeScript.
Trade-offs
Side by side
How the two options compare on the dimensions that usually decide this choice.
| Dimension | Tailwind CSS | CSS Modules / Vanilla Extract | Verdict |
|---|---|---|---|
| Production CSS size | Small: only the utilities you use are generated | Grows with each component stylesheet | Tailwind's CSS stays small as the app grows |
| Design token enforcement | Built in: the theme limits colors, spacing and radii | Needs your own CSS variable architecture | Tailwind enforces consistency out of the box |
| Markup readability | Long className strings in templates | Short class names, with styles in separate files | CSS Modules keeps JSX cleaner |
Questions
Frequently asked questions
Not noticeably. Tailwind v4 rebuilt its engine for speed and generates styles incrementally, and earlier versions add little to a typical build.
We compose classes with clsx and tailwind-merge through a cn() helper, and move repeated patterns into components rather than inventing new utilities.
Talk the decision through with an engineer
Share your constraints — team, traffic, budget, compliance. We'll reply within one business day, and the call is about your decision, not our preferred stack.