Tailwind CSS v4: CSS-First Configuration and 5x Faster Builds
Tailwind CSS v4 replaces tailwind.config.js with a CSS-first `@theme` directive and swaps PostCSS for Lightning CSS - here is everything that changed and how to migrate.
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.
Team workspace
Ship faster with chat, meetings, and projects in one place — Zlyqor.
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 → @theme block in your CSS
Replaces @tailwind base/components/utilities with @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.
Practical deep-dives on LLMs, developer tools, and AI engineering. No filler. Unsubscribe any time.
// written byFIG. AUTH-01
530
Mahmudul Haque Qudrati
CEO & ML Engineer
CEO and ML Engineer at Pristren. Builds AI-powered software for teams and writes about machine learning, LLMs, developer tools, and practical AI applications.
How to Build with Claude Code – Everything you can configure that the docs don't tell you
Claude Code's docs cover basics, but the real power is in hidden configs. Learn how to customize prompts, manage costs, and integrate with your workflow.
