Theme Variables

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

@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

Dynamic spacing scale

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

<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:

.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:

@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().