Tailwind CSS v4.0 Alpha: Everything That's Changing

Tailwind v4 is a complete rewrite. Here's what's new, what's breaking, and why you should care.

The Big Changes

1. Oxide Engine - 10x Faster

# v3: ~2.5s build time
# v4: ~250ms build time

# Full app rebuild
v3: 8 seconds
v4: 0.8 seconds 🚀

2. CSS-First Configuration

/* tailwind.config.css - yes, CSS! */
@theme {
  --color-primary: oklch(59% 0.2 230);
  --font-sans: "Inter", system-ui, sans-serif;
  --spacing-4: 1rem;
}

3. Native CSS Features

/* Container queries built-in */
@container (min-width: 400px) {
  .card {
    @apply grid-cols-2;
  }
}

/* CSS variables as utilities */
.component {
  color: var(--primary);
  margin: var(--spacing-4);
}

New Features I'm Excited About

Lightning CSS Integration

• Native CSS nesting
• Better browser compatibility
• Automatic vendor prefixes
• Smaller output files

Improved Types

// Full TypeScript support
import { Config } from 'tailwindcss/v4'

const config: Config = {
  // Autocomplete everything!
}

Better Developer Experience

• Instant hot reload
• Better error messages
• Smaller node_modules
• Native ESM support

Breaking Changes

1. No More JavaScript Config

// ❌ Old way (tailwind.config.js)
module.exports = {
  content: ['./src/**/*.{js,jsx}'],
  theme: { extend: {} }
}

// ✅ New way (tailwind.config.css)
@import "tailwindcss";
@theme {
  /* Your design tokens */
}

2. Updated Class Names

Some utilities renamed for consistency:

• flex-start → flex-items-start
• flex-end → flex-items-end
• whitespace-no-wrap → whitespace-nowrap

3. Plugin API Changes

Plugins need updates for v4 compatibility.

Migration Strategy

Step 1: Install Alpha

npm install tailwindcss@next @tailwindcss/postcss@next

Step 2: Convert Config

Use the migration tool:

npx @tailwindcss/upgrade@next

Step 3: Update Classes

The codemod handles most updates automatically.

Performance Comparison

Should You Upgrade?

Upgrade Now If:

• Starting a new project
• Love living on the edge
• Need better performance
• Want modern CSS features

Wait If:

• Complex plugin ecosystem
• Can't handle breaking changes
• Need IE11 support (lol)
• Risk-averse production app

My Take

v4 feels like the future. The CSS-first approach makes more sense, performance is incredible, and DX improvements are real.

Yes, the migration has friction, but the payoff is worth it. This is Tailwind growing up.

Resources

• v4 Alpha Docs
• Migration Guide
• Playground

The alpha is rough around the edges, but the direction is clear: faster, simpler, more powerful. Can't wait for stable.