Theme customization with @theme variables

Design tokens in Tailwind are stored in theme variables: special CSS variables defined with the @theme directive that influence which utility classes exist in your project. Defining @theme { --color-mint-500: oklch(0.72 0.11 178); } adds a new color, and Tailwind also generates regular CSS variables you can reference in arbitrary values or inline styles, like var(--color-mint-500). Use @theme instead of :root because theme variables instruct Tailwind to create new utility classes and must be defined top-level, not nested under other selectors or media queries; use :root for variables that should not map to utilities. Theme variables live in namespaces mapped to utility APIs: --color-* for color utilities like bg-red-500, --font-* for font-family utilities like font-sans, and --breakpoint-* for responsive variants like sm:* — defining --breakpoint-3xl: 120rem makes the 3xl:* variant available at viewports 120rem or wider. Scope: Tailwind CSS v4. Reviewed October 4, 2026.