Theme Variables

Design tokens live in @theme. A theme variable is a custom property that also creates utilities: define --color-brand-500 and you get bg-brand-500, text-brand-500 and friends, while var(--color-brand-500) remains available to custom CSS, inline styles and getComputedStyle().

Custom tokens create utilities and variablesHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --color-brand-500: oklch(0.62 0.19 150);
    --font-display: Georgia, "Times New Roman", serif;
    --radius-blob: 2rem 0.4rem;
  }
</style>
<div class="flex items-center gap-4 p-4">
  <h2 class="font-display text-3xl text-brand-500">Brand heading</h2>
  <span class="rounded-blob bg-brand-500 px-4 py-2 text-white">rounded-blob</span>
  <code class="border-l-4 border-brand-500 pl-2">var(--color-brand-500)</code>
</div>

Browser output of Listing 5.15 — Browser output of 15

The namespace picks the utilities: --color-* feeds every color utility, --font-*, --text-*, --radius-*, --shadow-* and --animate-* their namesakes, the single --spacing (0.25rem) multiplies into p-4 or w-64, and --breakpoint-* and --container-* create variants. @theme must be top-level; use :root for variables that should not become utilities. The defaults come from @theme in tailwindcss/theme.css: redefine a variable to override it, reset a namespace with --color-*: initial, or everything with --*: initial. Share a brand theme as an imported CSS file.

MENU