Design Tokens With @theme

Theme variables in CSS

In v4, design tokens are CSS variables declared in an @theme block. Each namespace creates utilities: --color-brand-500 enables bg-brand-500 and text-brand-500, --font-display enables font-display, --breakpoint-3xl enables 3xl:. The values are also emitted as normal CSS variables, so you can use var(--color-brand-500) in custom CSS or JavaScript. Set a namespace to initial (for example --color-*: initial;) to remove the defaults and use only your palette.

Make it your design system

Theme variables, arbitrary values and custom utilities adapt Tailwind to your brand.

A brand theme

Adding colours, a font and a breakpoint.

@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(0.97 0.02 200);
  --color-brand-500: oklch(0.62 0.13 200);
  --color-brand-900: oklch(0.30 0.06 200);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --breakpoint-3xl: 120rem;
}

/* now available: bg-brand-500, text-brand-900, font-display, 3xl:grid-cols-6 */

Name tokens by purpose where it helps

Semantic names such as --color-surface or --color-danger make redesigns and dark mode easier than raw hue names.

Quick check: What does declaring --color-brand-500 inside @theme enable?

• Nothing until a config file is added
• Utilities such as bg-brand-500 and text-brand-500
• Only a CSS variable without utilities
• A new breakpoint