Salta al contenuto principale
All notes
2026 · 05 · 6 min

Tailwind v4 in production: what I'd do differently

Tailwind v4 is a real upgrade for design tokens and build perf. The migration is mostly painless until you hit dark-mode strategies, plugin compatibility, and CSS-in-JS interop.

I've shipped Tailwind v4 on three projects in the last quarter. The headline win is real: design tokens via @theme are first-class, the engine is faster, and the dependency graph shrinks. The headline pain is also real: plugins built for v3 won't load, and dark-mode strategies that relied on `darkMode: 'class'` need rewriting.

The migration that worked for me: token-first. Move every color, spacing, and font into @theme before touching components. Then the components migrate themselves — most v3 utility classes just work. The teams that started by mass-replacing config files burned a week.

What I'd watch for: any CSS-in-JS code that reads Tailwind's resolved theme via JS now has to read CSS custom properties instead. That's a whole class of helpers (like `theme('colors.brand')` in styled-components) that has to be rewritten. Plan for it.

WRITTEN BY
Ibrahim Aly
SENIOR FS ENGINEER · BERLIN ↔ CAIRO