Tailwind CSS v4: What Changed and Why It Matters

Tailwind CSS v4 is a ground-up rewrite with a new engine called Oxide. It's faster, simpler to configure, and fully embraces modern CSS.

# The Big Changes

# 1. CSS-First Configuration

Gone is tailwind.config.js. Configuration now lives in your CSS:

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.75 0.18 145);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

# 2. Lightning Fast

The new Oxide engine, written in Rust, delivers:

• 10x faster full builds
• 100x faster incremental builds
• Near-instant hot reloading in development

# 3. Modern CSS Features

v4 leverages features that didn't exist when Tailwind was first created:

/* Container queries */
@container (min-width: 400px) {
  .card { grid-template-columns: 1fr 1fr; }
}

/* CSS nesting (native) */
.parent {
  .child { color: red; }
}

/* oklch color space */
--color-primary: oklch(0.65 0.2 145);

# 4. No More PostCSS (Optional)

You can now use Tailwind as a Vite plugin directly:

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

# Migration

The migration is straightforward for most projects:

npx @tailwindcss/upgrade

This CLI tool handles:

• Converting tailwind.config.js to CSS @theme directives
• Updating deprecated utility classes
• Adjusting import statements

# Should You Upgrade?

If you're starting a new project: absolutely. The DX improvements alone are worth it.

For existing projects: the upgrade tool makes it painless, but test thoroughly — especially if you have custom plugins.