Tailwind v4's CSS-First Config is a Game Changer

No more tailwind.config.js — Tailwind v4 moves everything into CSS using @theme. Here's what that means in practice and why I love it.

Tailwind CSS v4 ships with a brand-new engine (Oxide) and, more importantly, a CSS-first configuration model. Your entire theme now lives in globals.css using @theme — no JavaScript config file required.

Before vs. After

In v3 you'd open tailwind.config.js, extend the theme object, and hope your editor resolved the new tokens. In v4 you write plain CSS custom properties inside @theme and Tailwind generates the utility classes automatically.

/* globals.css — v4 style */
@import "tailwindcss";

@theme inline {
  --color-brand: oklch(65% 0.25 265);
  --radius-card: 1rem;
  --font-display: "Inter", sans-serif;
}

That's it. You now have a brand utility class, a rounded-card class, and a font-display class — no JS, no restart, no waiting.

oklch colors

v4 embraces the oklch color space natively. oklch gives you perceptually uniform lightness and chroma, so your dark-mode palette actually looks balanced instead of feeling washed out or overpowering.

• oklch(65% 0.25 265) — a vivid indigo
• oklch(30% 0.1 265) — the same hue, dark mode variant
• Adjust only the L channel for accessible contrast

“CSS-first config is what Tailwind always should have been — CSS tooling that stays in CSS.”