Tailwind CSS v4 is a ground-up rewrite. The biggest change: no more tailwind.config.js.
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.
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;
}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.