# Tailwind v4 theme tokens

URL: https://xodia.ai/glossary/tailwind-theme-tokens
Description: Tailwind v4 theme tokens explained: what it is, why it matters and how Xodia uses it, with links to the Xodia features and guides that cover it.
Last updated: 2026-11-08

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 November 8, 2026

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

- [Tailwind CSS in Xodia](https://xodia.ai/frameworks/tailwind)
- [The visual editor](https://xodia.ai/product/visual-editor)

## Related terms

- [Design tokens Design 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.](https://xodia.ai/glossary/design-tokens)
- [Fluid type Fluid 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.](https://xodia.ai/glossary/fluid-type)
- [Breakpoint A 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.](https://xodia.ai/glossary/breakpoint)

[See every term in the glossary](https://xodia.ai/glossary)

Glossary