Tailwind CSS v4 isn’t just an update, it’s a complete rethinking of how the framework works. After migrating several projects, here’s our honest take.
CSS-first configuration
The biggest shift: configuration moves from tailwind.config.js into CSS itself using @theme blocks. This feels strange at first, but it’s genuinely cleaner. Your design tokens live in your stylesheet, not a separate JavaScript file.
@import "tailwindcss";
@theme {
--color-brand-500: #6366f1;
--font-family-sans: "Inter", sans-serif;
}The Vite plugin replaces the PostCSS plugin
No more PostCSS configuration. Tailwind v4 integrates directly with Vite via @tailwindcss/vite, which means faster builds and better HMR.
Content detection is automatic
You no longer need to specify content paths. The engine scans your project automatically. One less thing to configure and one less source of “why aren’t my classes working” bugs.
Migration effort
For greenfield projects, v4 is a joy. For existing projects with complex configs, budget a few hours. The upgrade guide is thorough, but there are genuine breaking changes, especially around how colours and spacing are defined.
Our recommendation: upgrade new projects immediately, plan migrations for existing ones.