What's new in Tailwind CSS v4

Tailwind CSS v4 is a ground-up rewrite. The biggest change: no more tailwind.config.js.

CSS-first configuration

Instead of a JS config file, you define your theme inside your CSS using @theme.

@import "tailwindcss";
 
@theme {
  --color-brand: #e2b714;
  --font-sans: "Geist", sans-serif;
}

Any --color-* variable you define becomes a Tailwind utility automatically. So bg-brand just works.

Dynamic theming

This makes runtime theming trivial. Define your color tokens as CSS variables, override them per theme selector, and Tailwind utilities pick them up automatically.

[data-theme="dark"] {
  --bg: #0a0a0a;
  --fg: #ededed;
}
 
[data-theme="light"] {
  --bg: #fafafa;
  --fg: #171717;
}

No PostCSS config needed

v4 ships its own Vite and PostCSS plugins. Setup is down to a single import and you're done.

It's the most significant Tailwind release since v2, and it shows — builds are noticeably faster too.