Tailwind CSS v4: The Config-Free Future

Tailwind CSS v4 is a ground-up rewrite that takes full advantage of modern CSS features. The headline change: no more tailwind.config.js.

CSS-First Configuration

Everything lives in your stylesheet now:

@import "tailwindcss";

@theme {
  --color-brand: oklch(60% 0.2 250);
  --font-sans: "Inter", sans-serif;
  --radius-card: 12px;
}

Design tokens are CSS custom properties. You can use them anywhere — in your components, in inline styles, in third-party libraries. No config file needed.

The New Engine

The v4 engine is significantly faster. The JIT compiler is rewritten in Oxide (Rust + Lightning CSS), which means:

• Full builds are 5× faster
• Incremental builds are 100× faster in large projects
• CSS output is smaller thanks to Lightning CSS's optimizer

Vite Integration

With v4, the Vite plugin replaces the PostCSS plugin:

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

No PostCSS config. No separate autoprefixer. One plugin does it all.

Migrating from v3

Tailwind ships a migration codemod:

npx @tailwindcss/upgrade

It converts your config to @theme blocks, updates deprecated utility names, and handles the most common breaking changes automatically.

Overall, v4 feels like the version Tailwind always wanted to be. The CSS-native approach makes design tokens genuinely portable and the performance improvements are dramatic on large codebases.