# Design Tokens With @theme — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/x-theme

> Variables that create utilities.

## Theme variables in CSS

In v4, design tokens are CSS variables declared in an `@theme` block. Each namespace creates utilities: `--color-brand-500` enables `bg-brand-500` and `text-brand-500`, `--font-display` enables `font-display`, `--breakpoint-3xl` enables `3xl:`. The values are also emitted as normal CSS variables, so you can use `var(--color-brand-500)` in custom CSS or JavaScript. Set a namespace to `initial` (for example `--color-*: initial;`) to remove the defaults and use only your palette.

## Make it your design system

Theme variables, arbitrary values and custom utilities adapt Tailwind to your brand.

![Three ideas: @theme tokens, arbitrary values, custom utilities and variants.](assets/figures/tailwind/section-5-map.svg) — Figure 5.1 — Theme tokens, arbitrary values and custom utilities.

## A brand theme

Adding colours, a font and a breakpoint.

```css
@import "tailwindcss";

@theme {
  --color-brand-50:  oklch(0.97 0.02 200);
  --color-brand-500: oklch(0.62 0.13 200);
  --color-brand-900: oklch(0.30 0.06 200);
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --breakpoint-3xl: 120rem;
}

/* now available: bg-brand-500, text-brand-900, font-display, 3xl:grid-cols-6 */
```

## Name tokens by purpose where it helps

Semantic names such as --color-surface or --color-danger make redesigns and dark mode easier than raw hue names.

**Quiz:** What does declaring --color-brand-500 inside @theme enable?

- [ ] Nothing until a config file is added
- [x] Utilities such as bg-brand-500 and text-brand-500
- [ ] Only a CSS variable without utilities
- [ ] A new breakpoint

*Answer:* Utilities such as bg-brand-500 and text-brand-500. Theme variables create utilities.