Tailwind CSS v4 — What Changed

Tailwind v4 brings performance improvements and new capabilities.

• Tailwind CSS v4 — What Changed
• New Features
• CSS Variables
• Improved Performance
• New Utilities
• Enhanced Variables
• Migration
• Performance
• FAQ

New Features

CSS Variables

/* Built-in CSS variable support */
@theme {
  --color-primary: #3B82F6;
}

Usage:

.button {
  background-color: var(--color-primary);
}

Improved Performance

Faster compilation with Rust-based engine.

New Utilities

<!-- Subgrid support -->
<div class="grid-cols-subgrid"></div>

<!-- Field-sizing -->
<input class="field-sizing-content" />

<!-- Line clamping improvements -->
<div class="line-clamp-3"></div>

Enhanced Variables

// tailwind.config.js
module.exports = {
  theme: {
    colors: ({ colors }) => ({
      gray: colors.slate,
      primary: colors.blue,
    })
  }
}

Migration

From v3 to v4:

npm install -D tailwindcss@latest
npx tailwindcss --upgrade

Mostly backwards compatible.

Performance

Build time improvements:

• 3x faster builds
• Smaller CSS output
• Better caching

FAQ

Q: Should I upgrade to v4? A: Yes, if you're on v3. New projects should start with v4.

Q: Is v4 backwards compatible? A: Mostly yes. Some class names changed.

Q: What about plugins? A: Most plugins work. Check documentation.

Tailwind v4 continues improving CSS utility-first development.