What are the advantages of utility-first CSS (Tailwind) over CSS-in-JS?

What is Utility-First CSS?

Utility-first CSS uses pre-defined atomic classes applied directly in markup instead of writing custom CSS. Each class does one thing: flex sets display: flex, p-4 sets padding: 1rem, text-lg sets font-size: 1.125rem.

Tailwind's Key Advantages:

1. Zero runtime — Tailwind compiles to a static CSS file at build time. No JavaScript is injected at runtime to process styles. This means faster page loads and no flash of unstyled content from delayed style injection.

2. React Server Components compatible — Since Tailwind is pure CSS, it works seamlessly with RSC. CSS-in-JS libraries like styled-components and Emotion rely on React context and client-side JavaScript injection, making them incompatible with Server Components.

3. Automatic dead code elimination — Tailwind scans your template files and generates only the utility classes you actually use. A typical Tailwind project ships 5-15KB of CSS regardless of how many utilities exist in the framework.

4. No naming decisions — You never name a class. No .card-wrapper-inner-title-active debates. The markup describes the styles directly.

5. Design token consistency — Tailwind's config enforces a constrained design system. p-4 is always 1rem, text-blue-500 is always the same blue. This prevents inconsistent one-off values like padding: 13px.

CSS-in-JS Advantages (When They Matter):

• Dynamic styles from props — background: ${props => props.color} changes styles based on runtime data. With Tailwind, you toggle class names instead.
• Co-location — Styles live in the same file as the component. Some teams find this easier to maintain.
• TypeScript integration — Style props can be typed, catching errors at compile time.

CSS-in-JS Disadvantages:

• Runtime overhead — The library (10-15KB) parses template literals, generates CSS, and injects <style> tags at runtime.
• Server Component incompatibility — Cannot use React context or inject client JavaScript, breaking in the RSC model.
• Bundle size — Both the library code and the style definitions add to the JavaScript bundle.
• Hydration cost — Styles must be serialized during SSR and deserialized on the client.

CSS Modules — The Middle Ground:

CSS Modules provide build-time scoping (no collisions) with zero runtime cost, but require separate .module.css files. They work with Server Components and offer full CSS power (animations, media queries) without a naming convention.

Tailwind CSS v4 Improvements:

Tailwind v4 uses cascade layers internally, supports CSS-first configuration (replacing JavaScript config files), and has improved build performance with a new Rust-based engine.