Tailwind CSS v4 has arrived, and it completely reimagines how the framework operates under the hood. The new Oxide engine, built in Rust, makes builds up to 10x faster than v3. But the most significant change is the move away from the traditional tailwind.config.js file towards a pure CSS-driven configuration.
With the new @theme directive, developers can define their design tokens using standard CSS variables right inside their global stylesheet. This approach feels far more native to the web platform and allows for dynamic theming at runtime without relying on complex JavaScript overrides. The days of struggling with deep object merging in the config file are over.
Migrating an existing project to v4 is surprisingly straightforward, thanks to backward compatibility and automated codemods. However, fully embracing the new CSS-first paradigm requires refactoring your theme definitions. This shift not only cleans up your project root but also aligns your styling architecture more closely with modern web standards.