Tailwind CSS v4: CSS-First Configuration and 5x Faster Builds

Tailwind CSS v4 Is a Complete Rethink

Tailwind CSS v4 is not just an incremental update. It replaces the JavaScript configuration file with a CSS-first approach, swaps the PostCSS-based build pipeline for Lightning CSS, and introduces container queries, text shadows, and starting-style animations as first-class utilities.

CSS-First Configuration

The most visible change: no more tailwind.config.js. Configuration lives in your CSS file via the @theme directive:

/* Before (v3) — in tailwind.config.js */
/* module.exports = { theme: { extend: { colors: { brand: '#6366f1' } } } } */

/* After (v4) — directly in your CSS */
@import "tailwindcss";

@theme {
  --color-brand: #6366f1;
  --font-display: "Inter Variable", sans-serif;
  --radius-card: 12px;
  --spacing-18: 4.5rem;
}

Every @theme variable becomes a CSS custom property AND a Tailwind utility. After the above, you can write class="bg-brand text-brand" and class="rounded-card" immediately.

Lightning CSS Engine

Tailwind v4 ships with Lightning CSS (written in Rust) instead of PostCSS. Results:

• 5x faster full builds
• 100x faster incremental builds in watch mode
• No PostCSS config file required
• Vendor prefixes handled automatically
• CSS nesting supported natively (no plugin)

# v3 setup
pnpm add -D tailwindcss postcss autoprefixer
# + postcss.config.js required

# v4 setup — just Tailwind
pnpm add -D tailwindcss@next @tailwindcss/vite
# or for Next.js:
pnpm add -D tailwindcss@next @tailwindcss/postcss

Vite Plugin

For Vite-based projects, use the first-party Vite plugin instead of PostCSS:

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

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

Container Queries — Built In

Container queries no longer require the @tailwindcss/container-queries plugin:

<div class="@container">
  <div class="@sm:flex-row flex-col flex gap-4">
    <!-- switches to row layout when parent ≥ 24rem -->
  </div>
</div>

Named containers:

<aside class="@container/sidebar">
  <nav class="@lg/sidebar:block hidden">...</nav>
</aside>

New Utility Classes

Text shadow — finally built in:

<h1 class="text-shadow-lg text-shadow-black/25">Heading</h1>

Starting style for CSS entry animations without JavaScript:

<div class="starting:opacity-0 transition-opacity duration-300 opacity-100">
  Fades in on first render
</div>

Migrating From v3

Most v3 projects need only a few changes:

# Run the official migration tool
npx @tailwindcss/upgrade

What the tool does:

1. Converts tailwind.config.js → @theme block in your CSS
2. Replaces @tailwind base/components/utilities with @import "tailwindcss"
3. Updates deprecated class names (shadow-sm → shadow-xs, etc.)
4. Removes PostCSS config if you are using the Vite plugin

Manual check after migration: look for any plugins that used the JavaScript config API — those need to be rewritten for v4's CSS-based extension model.

References: Tailwind v4 blog · docs · upgrade guide