# Tailwind CSS v3 to Tailwind CSS v4 Migration Guide
> Framework: Tailwind CSS (v3.4 -> v4.0)
> Automated Codemod: `npx @tailwindcss/upgrade@next .`
> Canonical URL: https://agentnow.in/migrations/tailwind-v3-to-v4-migration

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

## Key Breaking Changes
- `@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.

## Automated Codemod Command
```bash
npx @tailwindcss/upgrade@next .
```

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