using-theme-variables

Design tokens in Tailwind v4 are defined using the @theme directive with CSS variable declarations. Add a @theme block containing semantic, namespaced tokens for colors, fonts, spacing, breakpoints, radii, and shadows—Tailwind generates utilities from these variables automatically, enabling centralized theme management across your project.

OkLCh is a perceptually uniform color space that improves accessibility and visual consistency in design systems. Unlike RGB or HSL, OkLCh adjusts colors predictably across lightness and chroma, making theme tokens more maintainable and easier to generate color variations programmatically.

Yes. Tailwind v4 @theme variables are standard CSS custom properties, so you can access them in JavaScript via `getComputedStyle()` or `document.documentElement.style.getPropertyValue()`. This enables dynamic theming and runtime access to semantic tokens across CSS and application code.

Namespace tokens by category using prefixes like --color-*, --font-*, --text-*, --spacing-*, --radius-*, and --shadow-* in your @theme block. This semantic naming convention ensures tokens are discoverable, prevents naming collisions, and makes utilities generated from the theme self-documenting.

Yes. Extract your @theme block into a shared CSS file or design token configuration and import it into each project's Tailwind setup. This approach enables cross-project token reuse, ensures consistent branding, and centralizes design system maintenance across your organization.

CSS variables in @theme are scoped to the selector where they're declared—typically the root or :root pseudo-class. If tokens need different values for nested contexts, you must redeclare variables in child selectors. Dynamic runtime changes require careful cascade management to avoid specificity conflicts.