Tailwind CSS v4 is the most significant rewrite since the project launched. The PostCSS plugin architecture is gone. The javascript config file is gone. The JIT engine is gone — replaced by a new Rust-based engine that's 10x faster. Here's everything that changed and what it means for your projects.
CSS-First Configuration with @theme
The tailwind.config.js file is replaced by an @theme block in your CSS file. Your design tokens are now CSS custom properties, which means they're available to non-Tailwind code too — no more duplicating your color palette between JS and CSS.
The @theme block is NOT the same as :root. Variables defined in @theme are registered as Tailwind design tokens and generate utility classes. Variables in :root are just CSS custom properties.
The New Engine: No PostCSS Required
The v4 engine is a single binary — no PostCSS, no autoprefixer, no plugins. It scans your files at near-native speed and generates only the CSS you use. In benchmarks, a large project that took 800ms to build with v3 JIT now builds in 80ms.
Breaking Changes to Watch
Several utility names changed: ring is now outline, shadow-sm is now shadow-xs, and the default border color changed from gray-200 to currentColor. The migration guide covers all breaking changes, and the official upgrade tool handles most of them automatically.