Tailwind CSS v4: A Complete Guide to New Features

What Changed in Tailwind CSS v4

Tailwind CSS v4 introduces a fundamental architecture change. The biggest shift is CSS-first configuration.

CSS-First Configuration

Instead of the traditional tailwind.config.js, you configure directly in your CSS file:

@import "tailwindcss";
 
@theme {
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --font-sans: "Inter", sans-serif;
}

New Utilities

Container Queries

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-2">
    <!-- Layout that responds to container size -->
  </div>
</div>

Improved Dark Mode

You can define custom variants directly in CSS:

@custom-variant dark (&:is(.dark *));

Plugin Loading

@plugin "@tailwindcss/typography";

Performance Improvements

v4 uses a new engine written in Rust:

• Build Speed: Up to 10x faster
• Bundle Size: Smaller CSS output
• HMR: Near-instant updates

Migration Checklist

1. Move tailwind.config.js → CSS @theme block
2. Review @apply usage (some changes)
3. Switch plugins to @plugin directive
4. Update PostCSS config (@tailwindcss/postcss)

Conclusion

Tailwind CSS v4 is faster, more intuitive, and closer to CSS standards. We highly recommend using v4 for new projects.