Tailwind v4 theme tokens
Tailwind v4 theme tokens are CSS variables declared in an @theme block that define a site's colours, fonts, sizes and spacing, and that Tailwind turns into utility classes.
Updated
On this page
What it is
Tailwind CSS v4 moved configuration into CSS. A variable such as --color-brand inside @theme creates classes like bg-brand and text-brand, and --font-display creates font-display. The tokens are also plain CSS variables, so any stylesheet can read them.
Keeping colours and type in tokens means a change in one place updates every page that uses them, instead of hunting for hard-coded values.
In Xodia
Xodia reads your site's @theme tokens and shows them in the Variables panel, with light and dark modes, colours, fonts, text sizes and spacing. The Style panel offers your tokens first, so a colour you pick writes your token's class, not a one-off value.
Every Xodia starter ships with Tailwind v4 and its tokens in one stylesheet, and the Tailwind stack pack teaches your AI to keep using them.
Read more
Related terms
- Design tokensDesign tokens are the named values a design system is built from, such as brand colours, font families, text sizes and spacing steps, kept in one place and used everywhere.
- Fluid typeFluid type is text whose size grows smoothly with the width of the screen between a minimum and a maximum, usually written with the CSS clamp() function.
- BreakpointA breakpoint is a screen width at which a website's layout changes, such as moving from one column on phones to two columns on tablets.