Tailwind CSS v4: A First Look

Tailwind v4 is here and it's a significant evolution. The biggest change: the tailwind.config.js file is gone. Instead, everything lives in your CSS.

CSS-first configuration

In v3, you'd extend the theme in tailwind.config.js:

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        nebula: '#8b5cf6',
      },
    },
  },
}

In v4, you define it directly in your stylesheet:

/* globals.css (v4) */
@import "tailwindcss";

@theme {
  --color-nebula: #8b5cf6;
}

That's it. Tailwind reads the @theme block and generates utility classes for your custom tokens automatically.

New @plugin directive

Plugins are now imported with @plugin:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

No more adding them to the config file.

Faster build times

The new Oxide engine (written in Rust) is dramatically faster. Full builds that took seconds in v3 now take milliseconds. Incremental builds are near-instant.

What about PostCSS?

Tailwind v4 ships its own PostCSS plugin (@tailwindcss/postcss). You still need PostCSS in your pipeline, but the setup is simpler.

Verdict

v4 is a genuine improvement. The CSS-first approach feels more natural, the build times are unreal, and the integration with modern CSS features (cascade layers, color-mix(), etc.) is excellent. If you're starting a new project, go with v4. For existing projects, the migration guide is solid.