"Tailwind is lightweight" is a recurring claim, rarely quantified. On three recent projects — an admin dashboard, a brochure site, an e-commerce — we measured the delta vs styled-components and Emotion.
The numbers
- Admin dashboard (was styled-components): JS bundle −34 KB, CSS +18 KB. Net −16 KB. Render time −12% on heavy lists.
- Brochure site (was Emotion): JS bundle −41 KB, CSS +9 KB. Net −32 KB. LCP −180 ms.
- E-commerce (Tailwind v2 → v3): refactor only, but JIT mode dropped purged CSS from 89 KB to 12 KB. Net −77 KB on CSS.
Why it happens
CSS-in-JS computes class names at runtime: every component carries a small parsing/serialization cost. On a page with 200 components, that sum is not invisible. Tailwind moves everything to build time: CSS arrives ready, JS generates nothing.
When CSS-in-JS still wins
For styles genuinely tied to runtime state (advanced theme switching, user configurators, heavy A/B tests) Tailwind asks gymnastics with CSS variables or conditional classes. For those cases a CSS-in-JS library — preferably zero-runtime like Vanilla Extract or Linaria — is still the right call.