Lesson 12 +10 XP

Theme Variables

In Tailwind v4, your design system is defined as CSS variables inside @theme. These variables drive which utility classes get generated.

The @theme directive


css
@import "tailwindcss";

@theme { - font-display: "Satoshi", "sans-serif"; - breakpoint-3xl: 120rem; - color-avocado-500: oklch(0.84 0.18 117.33); - ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

Each - color-* variable generates utilities like bg-avocado-500, text-avocado-500, and fill-avocado-500.

Namespaces → utilities

Namespace	Generates
`- color-*`	`bg-`, `text-`, `border-`, `fill-`, ...
`- font-*`	`font-sans`, `font-serif`, `font-mono`
`- text-*`	`text-xs`, `text-xl` (font size)
`- font-weight-*`	`font-bold`, `font-medium`
`- tracking-*`	`tracking-wide`
`- leading-*`	`leading-tight`
`- breakpoint-*`	`sm:`, `lg:` variants
`- spacing-*`	`px-4`, `mt-2`, most sizing
`- radius-*`	`rounded-lg`
`- shadow-*`	`shadow-md`
`- blur-*`	`blur-md`
`- ease-*`	`ease-in-out`
`- animate-*`	`animate-spin`

Dynamic spacing scale

In v4 the spacing scale is dynamic. - spacing defaults to 0.25rem (4px), and any number works:


html
<div class="p-4"></div>   <! - padding: calc(var( - spacing) * 4) = 1rem - >
<div class="p-13"></div>  <! - also valid! - >
<div class="p-96"></div>  <! - also valid! - >

Referencing variables

Use theme variables in your own CSS:


css
.my-element {
  color: var( - color-blue-500);
  margin: - spacing(4); /* calc(var( - spacing) * 4) */
}

The - spacing() function generates spacing values from your theme.

@theme inline

When a theme variable references another variable, use @theme inline so utilities use the value instead of a var() reference:


css
@theme inline { - color-canvas: var( - acme-canvas-color);
}

Only used variables are emitted

By default only theme variables that are used get emitted to your CSS. Use @theme static to always generate them.

TL;DR

@theme defines design tokens as CSS variables.
Namespaces like - color-* generate utilities.
Spacing is dynamic - any number works.
Reference them with var() and - spacing().