Tailwind CSS v3 to Tailwind CSS v4 Migration Guide

Tailwind v4 is CSS-first. Replaces @tailwind directives with @import 'tailwindcss', removes tailwind.config.js in favor of @theme CSS blocks.

⚡ Automated 1-Line Codemod

npx @tailwindcss/upgrade@next .

🚨 Breaking Changes List

`@tailwind base; @tailwind components; @tailwind utilities;` replaced with single `@import 'tailwindcss';`.
`tailwind.config.js` is deprecated; themes are configured directly in CSS using `@theme` block.
Color values default to modern OKLCH color space.

🔧 Verified Migration Diff

// Tailwind CSS v3 -> v4 Migration
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
+ @theme {
+   --color-brand: #00f2fe;
+ }