
Tailwind CSS v4: What’s New and Why It Matters
Created: Sat Apr 05 2025
🆕 What’s New in Tailwind v4?
1. CSS-in-JS Engine (Lightning-Fast Builds)
Tailwind v4 is completely rewritten to use a new CSS-in-JS engine built in Rust. This means:
- Faster build times (up to 10x faster than v3)
- No more reliance on PostCSS
- Smaller output files
2. Just-in-Time (JIT) is the Default
Tailwind v4 drops support for old static builds and fully embraces JIT. You get:
- Instant utility generation
- Reduced CSS file size
- More flexibility with arbitrary values
3. No More @apply
in CSS
With v4’s engine, the traditional way of using @apply
inside CSS files is no longer supported. Instead, Tailwind encourages component-based architecture using utility classes directly or via class composition in your framework (React, Vue, etc.).
4. Arbitrary Variants Made Easier
Now you can write complex selectors with more ease. For example:
htmlCopyEdit<div class="[&>*]:text-red-500">...</div>
This allows you to target nested elements and pseudo-classes with full control.
5. New Default Colors and Design Tokens
Tailwind v4 comes with an updated color palette, spacing scale, and font sizes to better match modern UI trends.
🧠 Why It Matters
- Speed: Tailwind v4 drastically cuts down on compile time, especially in large-scale projects.
- Scalability: With its engine rewrite, Tailwind is now much better equipped to handle massive codebases and design systems.
- Simplicity: By removing legacy features like
@apply
and static builds, the learning curve is simplified for new devs.
🛠️ Migration Guide
Here’s how to upgrade from v3 to v4 smoothly:
- Update Tailwind Package
bashCopyEditnpm install tailwindcss@latest
- Review Your
tailwind.config.js
Remove any unused or deprecated settings. Tailwind v4 has new defaults for colors and spacing. - Remove PostCSS Plugins If you're using Tailwind with PostCSS, you can remove it entirely unless you need it for something else.
- Refactor
@apply
Usage Migrate styles that used@apply
in CSS files to your components or consider using class composition via JS.
📦 Who Should Upgrade?
Tailwind v4 is ideal for:
- Developers building large applications
- Teams working on design systems
- Projects needing blazing-fast builds
- Framework users (Next.js, Vue, Svelte, etc.)
🔮 Final Thoughts
Tailwind CSS v4 is a bold step into the future. By leveraging Rust, ditching legacy tools, and leaning fully into utility-first JIT, it solidifies itself as the most efficient way to build modern UIs.
If you haven’t used Tailwind before, v4 is the perfect time to start. And if you're a long-time user — get ready for the speed boost and a cleaner workflow.