A New Engine

Tailwind CSS v4 is a ground-up rewrite. The new engine is built on a custom CSS parser written in Rust, delivering dramatically faster build times and a simpler configuration experience.

Tailwind v4 is up to 10x faster than v3, with a full build completing in under 5ms for most projects.

What Changed

The biggest shift is that configuration moves from tailwind.config.js into your CSS file:

@import "tailwindcss";
 
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-sans: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

No more JavaScript config file. Your theme is defined right where your styles live.

New Features

Automatic Content Detection

Tailwind v4 automatically detects your template files — no need to configure content paths. It uses heuristics to find files that contain class names and only processes those.

Container Queries

Built-in support for container queries without a plugin:

<div class="@container">
  <div class="@sm:grid-cols-2 @lg:grid-cols-3">
    <!-- Responsive to the container, not the viewport -->
  </div>
</div>

First-Class CSS Variables

Every utility now generates a CSS custom property, making it trivial to compose with other tools:

.custom-element {
  background: var(--tw-color-primary);
  padding: var(--tw-spacing-4);
}

Migration from v3

Moving from v3 to v4 is straightforward for most projects:

1. Update the package — npm install tailwindcss@latest
2. Move theme config to CSS — convert your tailwind.config.js theme to @theme rules
3. Remove content config — automatic detection handles this now
4. Check deprecated utilities — a few class names changed for consistency

Here's a quick comparison of configuration approaches:

// v3 — tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#3b82f6",
      },
    },
  },
};

/* v4 — your CSS file */
@theme {
  --color-brand: #3b82f6;
}

Performance Comparison

The new Rust-based engine delivers impressive numbers:

• Cold build: 3ms (down from 350ms)
• Incremental rebuild: <1ms
• CSS output size: 15-20% smaller due to better deduplication

Tips for Getting the Most Out of v4

• Use the new @theme directive for all customisations — it's the single source of truth
• Leverage container queries for truly reusable components
• Take advantage of automatic content detection — fewer config files means less maintenance
• Explore the new text-wrap: balance and text-wrap: pretty utilities for better typography

Tailwind v4 is the most significant update since the utility-first framework launched. The combination of speed, simplicity, and new features makes it worth upgrading today.