~/brav0kado
← guides
#CSS#Tailwind#Design Systems

Tailwind v4: CSS-Driven Design Tokens

How to replace tailwind.config.js with a pure CSS token system using @theme inline — and why it's better.

February 18, 2026·6 min read

What changed in v4

Tailwind v4 ditches the JavaScript config file in favour of a CSS-first approach. Everything that used to live in tailwind.config.js — colors, fonts, spacing — now lives in your stylesheet.

The @theme inline block

@theme inline {
  --color-accent-cyan: #38bdf8;
  --font-mono: var(--font-geist-mono);
}

Any --color-* token registered here becomes a Tailwind utility. --color-accent-cyan gives you text-accent-cyan, bg-accent-cyan, border-accent-cyan — with opacity modifiers (bg-accent-cyan/20) included.

Dark mode without the dark: prefix

Instead of scattering dark: prefixes across components, override your tokens in a media query:

@media (prefers-color-scheme: dark) {
  :root {
    --color-accent-cyan: #0ea5e9;
  }
}

Every component that uses text-accent-cyan automatically gets the dark value — no class changes needed.

Migration checklist

  • Replace @tailwind base/components/utilities with @import "tailwindcss"
  • Delete tailwind.config.js
  • Move all theme.extend values into @theme inline in your CSS
  • Replace darkMode: 'media' with a CSS media query override