What Changed in Tailwind CSS v4
Tailwind CSS v4 introduces significant changes to the configuration model and several utility class renames. The biggest shift is moving from a JavaScript config file (tailwind.config.js) to a CSS-native configuration using @theme in your stylesheet. Many v3 utilities were renamed, reorganized, or removed entirely.
Our migration tool identifies deprecated v3 classes in your template files and shows the correct v4 equivalent. This is faster and more accurate than searching the changelog manually — paste your component, get the corrected output. Key changes include the new @tailwindcss/vite plugin (replacing the PostCSS plugin), CSS variables for theme values, and renamed color and spacing utilities.
Migrating incrementally is recommended: update one component at a time, verify visually, then move on. The tool flags classes that need attention so you can prioritize what to tackle first. Some v3 patterns (arbitrary value utilities, responsive prefixes) remain largely the same — the tool distinguishes between what needs changing and what doesn't.
Tips
- Tailwind v4 requires the Vite plugin (
@tailwindcss/vite), not the PostCSS plugin. Update your Vite config first. - Theme values are now CSS custom properties:
var(--color-blue-500)instead of accessing theme via JavaScript. - The
contentconfig key is gone — v4 auto-detects template files using the same heuristics as the Vite plugin. - Run
npx @tailwindcss/upgradefor automated migration — use this tool to verify and handle edge cases the CLI misses.