Tailwind CSS v4: A Complete Guide to What Changed

Tailwind CSS v4 is a ground-up rewrite. The new engine (Oxide) is written in Rust and is 5x faster for full builds. But the bigger change is the configuration model.

No More tailwind.config.js

In v4, configuration lives in your CSS file:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.6 0.2 240);
  --font-display: "Inter", sans-serif;
  --radius-lg: 0.75rem;
}

This is a major DX improvement — one fewer file to maintain, and you can see your design tokens alongside your styles.

CSS-First Plugins

Plugins are now written as CSS rather than JavaScript:

@plugin "tailwindcss-animate";

Automatic Content Detection

You no longer need to specify a content array. Tailwind v4 automatically scans all files in your project. Combined with the faster engine, this makes cold-start builds dramatically faster.

Migration

The official @tailwindcss/upgrade codemod handles most migrations automatically:

npx @tailwindcss/upgrade

For most projects, this takes under 5 minutes. Definitely worth the upgrade.