v4: config moved INTO the css — the @theme directive
v3 kept tokens in
tailwind.config.js (read by a build step). v4 defines
them as CSS variables inside @theme. The namespace of each var
(--color-*, --font-*, --radius-*, …) tells
Tailwind which utility classes to generate. With the Play CDN, @theme lives
in a <style type="text/tailwindcss"> block.
<!-- the Play CDN script -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!-- @theme: tokens as CSS vars -> auto-generated utilities -->
<style type="text/tailwindcss">
@theme {
--color-brand: #7c3aed; /* -> bg-brand, text-brand, fill-brand ... */
--color-brand-soft: #ede9fe; /* -> bg-brand-soft */
--font-display: Georgia, serif; /* -> font-display */
--radius-card: 1rem; /* -> rounded-card */
}
</style>
Each --color-brand token also becomes a real
:root CSS variable, so you can write
style="color: var(--color-brand)" or
text-[var(--color-brand)] — no build, no JS.
A card built entirely from custom-token utilities
design tokens
Brand by token
This card's violet background, its serif headline face and its
rounded card corners each come from a token I just defined
in @theme — they are not in Tailwind's default theme.
bg-brand + font-display
<!-- the card's custom-token classes -->
<div class="bg-brand text-white font-display rounded-card shadow-lg ...">
<div id="gc-brand" class="bg-brand text-brand-soft rounded-card ...">
<span id="gc-display" class="font-display">...</span>
</div>
</div>
measuring resolved tokens…
The default token namespaces (v4)
The prefix of a
@theme variable is its namespace — and the namespace
decides which utilities / variants the token generates. Add to a namespace to extend;
set the namespace to initial to wipe it.
| namespace | example token | generates |
|---|---|---|
| --color-* | --color-brand: #7c3aed | bg-brand, text-brand, fill-brand, border-brand … |
| --font-* | --font-display: Georgia, serif | font-display |
| --text-* | --text-hero: 3rem | text-hero (font-size + line-height) |
| --font-weight-* | --font-weight-bold: 700 | font-bold |
| --radius-* | --radius-card: 1rem | rounded-card |
| --spacing | --spacing: 0.25rem | the whole spacing scale (p-4 = 4 × --spacing) |
| --shadow-* | --shadow-lg: … | shadow-lg |
| --breakpoint-* | --breakpoint-3xl: 120rem | 3xl:* responsive variants |
| --container-* | --container-md: 28rem | max-w-md + @md container variants |
Note: the spacing scale is driven by a single base variable
--spacing (default 0.25rem), not --spacing-* entries.