Tailwind CSS v4: What’s New and What Changed

Tailwind CSS v4 is here, and it’s a complete rewrite! Built on a new high-performance engine written in Rust, v4 brings significant improvements in speed, a new CSS-first configuration approach, and modern syntax updates.

The New Engine: Lightning Fast ⚡

Tailwind v4 features a completely rewritten engine built with Oxide (Rust-based), making it significantly faster than v3:

• 10x faster on incremental builds
• Up to 5x faster on full builds
• Smaller bundle sizes - More efficient CSS generation
• Better memory usage - Optimized for large projects

You’ll notice the speed difference immediately, especially on larger codebases.

CSS-First Configuration

One of the biggest changes is how you configure Tailwind. Say goodbye to tailwind.config.js and hello to CSS-based configuration!

The Old Way (v3)

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

The New Way (v4)

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-display: "Inter", sans-serif;
  --breakpoint-tablet: 768px;
}

This approach is more intuitive, especially for developers who are primarily working with CSS. It also enables better IDE support and autocomplete.

Modern Gradient Syntax

Tailwind v4 updates gradient utilities to use modern CSS syntax:

/* v3 */
bg-gradient-to-r from-blue-500 to-purple-500

/* v4 */
bg-linear-to-r from-blue-500 to-purple-500

The new syntax includes:

• bg-linear-to-* - Linear gradients
• bg-radial-* - Radial gradients
• bg-conic-* - Conic gradients

All aligned with native CSS gradient functions!

Simplified Color Palette

The color palette is streamlined while remaining highly customizable:

@theme {
  /* Define semantic colors */
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(0 0% 3.9%);
  --color-primary: hsl(221 83% 53%);
  --color-secondary: hsl(210 40% 96%);
}

Use them in your classes:

<div class="bg-background text-foreground">
  <button class="bg-primary text-white">Click me</button>
</div>

Container Queries Support

Native container queries are now built-in:

<div class="@container">
  <div class="@lg:grid-cols-2"></div>
</div>

Use @ prefix for container-based breakpoints:

• @sm: - Small container
• @md: - Medium container
• @lg: - Large container

New Utility Classes

Cascading Layers

Better control over CSS cascade:

<div class="@layer-utilities">
  <p class="custom-utility">Layered content</p>
</div>

Logical Properties

Built-in support for logical properties:

<div class="ms-4 me-8"></div>

Field Sizing

New field-sizing utility for form inputs:

<input class="field-sizing-content" type="text" />

Breaking Changes to Watch

1. No More JIT Mode

JIT is now the default and only mode. The mode: 'jit' config option is removed.

2. PostCSS Plugin Changes

New setup for PostCSS:

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

3. Gradient Class Renames

Update all gradient classes:

• bg-gradient-to-r → bg-linear-to-r
• bg-gradient-to-br → bg-linear-to-br
• etc.

4. Configuration Location

Move configuration from tailwind.config.js to your CSS file using @theme directive.

Migration Strategy

Here’s how to migrate from v3 to v4:

Step 1: Update Dependencies

npm install tailwindcss@next @tailwindcss/postcss@next

Step 2: Update PostCSS Config

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Step 3: Convert Config to CSS

Move your tailwind.config.js customizations to CSS:

@import "tailwindcss";

@theme {
  --color-primary: #your-color;
  --font-sans: "Your Font", sans-serif;
}

Step 4: Update Gradient Classes

Find and replace:

# Using VS Code search/replace
bg-gradient-to- → bg-linear-to-

Step 5: Test Thoroughly

Run your build and check for:

• Missing utilities
• Color mismatches
• Layout shifts

Performance Improvements

The new engine brings massive performance gains:

Project Size	v3 Build Time	v4 Build Time	Improvement
Small	450ms	50ms	9x faster
Medium	1.2s	150ms	8x faster
Large	3.5s	400ms	8.75x faster

Times are approximate and vary by system

New Developer Experience

Better Error Messages

Tailwind v4 provides clearer, more actionable error messages:

✗ Unknown utility class: bg-gradient-to-r
  Did you mean: bg-linear-to-r?

Improved Autocomplete

CSS-first configuration enables better IDE autocomplete for:

• Theme values
• Custom colors
• Breakpoints
• Spacing values

Hot Module Replacement

Faster HMR means you see changes instantly:

• ~100ms for style updates
• No full page reloads for CSS changes

Should You Upgrade?

Upgrade if:

• ✅ You want faster build times
• ✅ You’re starting a new project
• ✅ You have good test coverage
• ✅ You’re comfortable with CSS configuration

Wait if:

• ⏸️ You rely heavily on custom config
• ⏸️ You’re mid-project with tight deadlines
• ⏸️ Your team isn’t ready for the learning curve

Conclusion

Tailwind CSS v4 is a major leap forward. The new engine, CSS-first configuration, and modern syntax make it more powerful and developer-friendly than ever.

While the migration requires some work, the performance gains and improved DX are well worth it. Start with a small project, get familiar with the new patterns, and enjoy the speed boost!

The future of Tailwind is here, and it’s blazing fast! 🔥

---

Resources:

• Tailwind CSS v4 Documentation
• Migration Guide
• GitHub Repository
• Playground