Tailwind CSS v4 rewrote almost everything that made v3 great. The config file is gone. The plugin system changed. Colors moved to OKLCH. If you are migrating a real project, expect surprises.
Here is the exact process I use to migrate production apps — including all the traps I fell into so you do not have to.
Why Upgrade at All?
Three reasons:
- Speed. The Oxide engine (Rust-based) is roughly 10x faster at scanning classes. HMR updates feel instant.
-
Less config. Design tokens live in your CSS. The
tailwind.config.js\file is gone. -
Modern CSS. Container queries,
@starting-style\, OKLCH colors — all built in.
If you are on a fresh project, skip v3 entirely. If you have a mature v3 codebase, read on.
Step 1: Update Dependencies
Remove the old packages and install v4:
\bash
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@next @tailwindcss/postcss
\\
The new @tailwindcss/postcss\ package replaces the old tailwindcss\ PostCSS plugin. It also includes autoprefixing, so you can remove autoprefixer\.
Step 2: Update PostCSS Config
\\
Originally published on Craftly.
Production-ready Next.js templates — browse the current catalog at https://getcraftly.gumroad.com or save with the All-Access Bundle.
Built with Next.js 16, TypeScript, and Tailwind CSS v4.
Top comments (0)