Tailwind design token

In the context of Tailwind, a design token is simply a theme variable that represents things like a colour, spacing size, font family or radius.

The idea is that you define your tokens as theme variables like so:

@theme {
  --color-primary: #2563eb;
  --spacing-button-x: 1.125rem;
}

And then Tailwind takes care of generating the appropriate utility or variant classes depending on the token’s variable namespace.

So because --color-primary from above is in the --color-* namespace, Tailwind will give us some helpful utility classes like text-primary and bg-primary.ss