Tailwind CSS 4

Tailwind CSS 4 is a ground-up rewrite that moves configuration from JavaScript into CSS. It is faster, simpler, and uses the OKLCH color space for more perceptually uniform colors.

CSS-first configuration

In v3 you maintained a tailwind.config.ts file. In v4, design tokens are defined with the @theme directive inside your CSS.

/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.65 0.2 250);
  --font-sans: "Inter", sans-serif;
  --breakpoint-xl: 1280px;
}

Any value defined under @theme becomes available as a Tailwind utility. The example above generates classes like bg-brand, font-sans, and the xl: breakpoint.

Import-based setup

Tailwind 4 replaces @tailwind base; @tailwind components; @tailwind utilities; with a single import statement.

@import "tailwindcss";

Plugins are also loaded through CSS imports rather than the old plugins array.

OKLCH color system

Tailwind 4 defaults to the OKLCH color space. OKLCH values have three channels:

Channel	Meaning	Range
L	Lightness	0 (black) to 1 (white)
C	Chroma (saturation)	0 to ~0.37
H	Hue angle	0 to 360

--color-primary: oklch(0.55 0.18 260);   /* a vivid blue */
--color-primary-light: oklch(0.75 0.12 260); /* lighter variant */

Because OKLCH is perceptually uniform, stepping lightness by equal amounts produces visually consistent scales — unlike HSL.

Key changes from v3

v3	v4
`tailwind.config.ts`	`@theme` in CSS
`@tailwind base/components/utilities`	`@import "tailwindcss"`
`plugins: [require('...')]`	`@import` in CSS
HEX / HSL colors	OKLCH colors
`darkMode: 'class'` in config	Dark mode via `@variant dark` or `.dark` class
`content: [...]` glob array	Automatic content detection

Automatic content detection

Tailwind 4 scans your project automatically — no content array needed. It detects template files, JSX, and MDX out of the box.

Migration tips

Remove tailwind.config.ts and move tokens to @theme in CSS.
Replace @tailwind directives with @import "tailwindcss".
Convert HEX/HSL custom colors to OKLCH for consistency.
Test dark mode — the mechanism may need a small tweak in your layout.