Tailwind CSS v4: What's New and Why It Matters

Tailwind CSS v4 is a ground-up rewrite of the popular utility-first CSS framework. It's faster, more powerful, and rethinks how you configure and extend Tailwind — moving away from JavaScript config files towards native CSS.

The New Engine: Oxide

Tailwind v4 introduces Oxide, a new high-performance engine built in Rust. The numbers speak for themselves:

• Full builds: 3.5x faster than v3
• Incremental builds: Up to 100x faster
• Smaller install footprint: Ships as a single package

CSS-First Configuration

The biggest change in v4 is that your tailwind.config.js is gone. Configuration now lives directly in your CSS file using @theme:

/* v3 — tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
}

/* v4 — your CSS file */
@import "tailwindcss";
 
@theme {
  --color-brand: #3b82f6;
  --font-family-sans: 'Inter', sans-serif;
}

New Utility Classes

Tailwind v4 ships with a range of new utilities:

• field-sizing-content — auto-resize textareas
• inset-shadow-* — inner shadows
• not-* variant — negate any variant
• starting-style — animate elements from hidden
• 3d transform utilities — rotate-x-*, rotate-y-*, perspective-*

The @import Model

In v3, you used three directives (@tailwind base, @tailwind components, @tailwind utilities). In v4, you simply import Tailwind:

@import "tailwindcss";

That's it. Tailwind handles the rest automatically.

Upgrading from v3

Tailwind provides an official upgrade tool:

npx @tailwindcss/upgrade@next

Is It Worth Upgrading?

If you're starting a new project: absolutely yes — start with v4. For existing projects, the upgrade tool makes it manageable, but budget time for testing.

The performance improvements alone make v4 compelling, especially in large codebases where Tailwind's build times have been a pain point. Combined with the cleaner CSS-first config, v4 feels like the version Tailwind was always meant to be.