Why I moved from Tailwind to... Tailwind v4
Tailwind CSS v4 is arguably the biggest update since the framework's inception. It's not just a version bump; it is a complete rewrite of the engine. Here is my experience migrating a large Next.js production app to Tailwind v4, and why you should consider it too.
The Problem with v3
- Build Performance: On massive projects, the JIT engine still takes a measurable amount of time to scan files.
- Configuration: The
tailwind.config.jsfile can get bloated with heavy customization. - JavaScript Dependency: You rely heavily on the Node.js ecosystem for the build process.
Enter Tailwind v4 (Oxide Engine)
Tailwind v4 introduces a new engine named Oxide, written in Rust. It is designed for speed—unified, single-pass compilation that is orders of magnitude faster.
Key Features
- Zero-Configuration: It detects your content files automatically. No more
content: ["./src/**/*.{ts,tsx}"]. - CSS-First Configuration: Instead of a JS config file, you configure variables directly in CSS.
/* main.css */
@import "tailwindcss";@theme {
--font-display: "Satoshi", "sans-serif";
--color-neon-blue: oklch(51.01% 0.274 263.83);
--spacing-128: 32rem;
}
`
- OKLCH Colors: Native support for the wide-gamut OKLCH color space, allowing for more vibrant and accessible color palettes.
The Migration Process
Migrating was surprisingly smooth, but there were "gotchas".
Step 1: Install the Beta
npm install tailwindcss@next @tailwindcss/vite@next
Step 2: Update Config
We deleted our 200-line tailwind.config.js and moved our custom design tokens into the CSS @theme block. This felt incredibly simplifying.
Step 3: Handling Plugins
Official plugins like @tailwindcss/typography and @tailwindcss/forms are now native or easily importable via CSS:
@import "tailwindcss/utilities";
@plugin "@tailwindcss/typography";
Performance Wins
The build times for our dashboard went from 8.5s to 1.2s. HMR (Hot Module Replacement) feels instantaneous.
Conclusion
Tailwind v4 represents the maturing of utility-first CSS. By moving configuration back to CSS and leveraging Rust for the heavy lifting, it feels like a native web platform tool rather than a JavaScript build artifact. If you value DX and build speed, upgrade immediately.