What Changed in Tailwind CSS v4

Tailwind v4 is a ground-up rewrite. The biggest breaking change: no more `tailwind.config.js`.

Instead, all theme customization happens in your CSS file using CSS custom properties and @theme:

css
@import "tailwindcss";

@theme {
  --color-primary-500: oklch(65% 0.18 175);
  --font-heading: "Space Grotesk", sans-serif;
  --radius-lg: 0.75rem;
}

This means your design tokens are now actual CSS variables — accessible from any CSS property, JavaScript, and browser DevTools without any config.

Why We Migrated

  1. 1.Zero runtime overhead — v4 generates purely static CSS with no JS runtime
  2. 2.CSS variables everywhere — var(--color-primary-500) works in inline styles, keyframes, and custom CSS
  3. 3.Oxide engine — the new Rust-based engine is 5x faster than Lightning CSS
  4. 4.Better IntelliSense — IDE autocomplete now reads from CSS, not a JS config object

Our Migration Process

For each project, we:

  1. 1.Replaced tailwind.config.js with @theme blocks in globals.css
  2. 2.Updated all theme()" function calls to var()` references
  3. 3.Removed the @tailwindcss/typography plugin (now built-in with prose)
  4. 4.Updated content array to the new @source directive

The migration took ~2 hours per project. The result: smaller CSS bundles and faster dev server startup.