Theme Variables (@theme)

CSS-first configuration

In v4 you customize Tailwind in CSS, with theme variables inside @theme. Each variable creates utilities:

@import "tailwindcss";

@theme {
  --color-brand-50: oklch(0.97 0.02 250);
  --color-brand-500: oklch(0.6 0.2 250);
  --color-brand-700: oklch(0.45 0.17 250);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
  --radius-card: 1.25rem;
}

The variables are also real CSS variables, so you can use them anywhere: var(--color-brand-500).

<style type="text/tailwindcss">
  @theme {
    --color-brand-50: oklch(0.97 0.02 250);
    --color-brand-500: oklch(0.6 0.2 250);
    --color-brand-700: oklch(0.45 0.17 250);
    --radius-card: 1.25rem;
  }
</style>
<div class="p-6">
  <div class="max-w-sm rounded-card bg-brand-50 p-6 ring-1 ring-brand-500/20">
    <p class="font-semibold text-brand-700">Your own design tokens</p>
    <p class="mt-1 text-sm text-gray-600">bg-brand-50, text-brand-700 and rounded-card come from @theme.</p>
    <button class="mt-4 rounded-lg bg-brand-500 px-4 py-2 text-white hover:bg-brand-700">Brand button</button>
  </div>
</div>

To replace a whole namespace (for example only your own colours), reset it first: --color-*: initial;. Projects upgrading from v3 can still load a JavaScript config with @config "./tailwind.config.js";.