How to Migrate from Tailwind CSS v3 to v4

Ditching the Config: The v4 Revolution

Tailwind v4 is a "CSS-First" framework. It means you no longer need a massive JavaScript file to control your design system.

### The native @theme Block

Instead of theme: { extend: { ... } }, you now write:

``css

@theme {

--color-brand: #3b82f6;

--font-display: "Inter", sans-serif;

}

``

This makes your theme settings available to the entire browser as native CSS variables, reducing the overhead of the Tailwind JIT processor.

### Lightning CSS Integration

By using the Lightning CSS engine under the hood, v4 can minify and prefix your CSS in a single pass. This removes the need for Autoprefixer and other heavy PostCSS plugins, slimming down your build pipeline significanty.