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:

  1. Update the package to v4
  2. Replace your tailwind.config.js with CSS-based configuration
  3. Update any deprecated utilities to their v4 equivalents
  4. Test your build output for visual regressions
  5. 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:

UtilityPurpose
text-wrap-balanceBalanced text wrapping for headings
text-wrap-prettyPrevents 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.