A New Era for Utility-First CSS
Tailwind CSS v4 represents a fundamental rethinking of how a CSS framework should work. Gone is the JavaScript-based configuration file. In its place, a pure CSS configuration approach that feels native to the language.
The result is faster build times, smaller output files, and a developer experience that finally feels right at home in any CSS workflow.
CSS-First Configuration
The biggest change in v4 is the move to CSS-first configuration. Instead of a tailwind.config.js file, you now configure Tailwind directly in your CSS using the @theme directive:
This approach has several advantages. Your configuration lives alongside your styles. IDE autocompletion works natively. And you can use CSS variables and custom properties directly in your theme definition.
Native Cascade Layers
Tailwind v4 uses native CSS cascade layers to manage specificity. This means utility classes always win over component styles, without needing important hacks or complex ordering strategies.
Performance Improvements
The new engine is significantly faster:
- 5x faster full builds compared to v3
- 100x faster incremental builds in development
- Smaller output thanks to better dead-code elimination
- No JavaScript dependency in the core engine
The best framework is one that gets out of your way. Tailwind v4 does exactly that — it becomes invisible infrastructure for your design system.
Migration Guide
Upgrading from v3 to v4 is straightforward for most projects. Here are the key steps:
- Update the package to v4
- Replace your
tailwind.config.jswith CSS-based configuration - Update any deprecated utilities to their v4 equivalents
- Test your build output for visual regressions
- Remove the old PostCSS plugin configuration if using the new Vite plugin
New Utilities Worth Knowing
V4 introduces several new utilities that fill common gaps:
| Utility | Purpose |
|---|---|
text-wrap-balance | Balanced text wrapping for headings |
text-wrap-pretty | Prevents orphaned words at line ends |
size-* | Sets both width and height simultaneously |
forced-colors:* | Styles for Windows High Contrast mode |
Tailwind v4 is a worthy evolution of the framework. The CSS-first approach feels more natural, the performance is outstanding, and the developer experience is the best it has ever been.