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:
- Converts
tailwind.config.js→@themeblock in your CSS - Replaces
@tailwind base/components/utilitieswith@import "tailwindcss" - Updates deprecated class names (
shadow-sm→shadow-xs, etc.) - 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
