Tailwind theme variable namespaces

What is a theme variable namespace?

A theme variable namespace is a prefix path you use to organise your design tokens (colours, spacing, fonts, etc) inside your Tailwind config.

Here are some example namespaces (see here for the full list):

Namespace	Utility classes
--color-*	Color utilities like bg-red-500, text-sky-300, and many more
--font-*	Font family utilities like font-sans
--text-*	Font size utilities like text-xl
--font-weight-*	Font weight utilities like font-bold
--breakpoint-*	Responsive breakpoint variants like sm:*
--spacing-*	Spacing and sizing utilities like px-4, max-h-16, and many more

Depending on the namespace you use to define a theme variable, Tailwind will make available different utility or variant classes.

For example, defining a theme variable in the --color-* namespace like this:

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

Wiill give you access to colour-based utility classes like:

• bg-mint-500
• text-mint-500

Defining a font variable in the --font-* namespace like this:

@theme {
  --font-acme: <some-font>;
}

Will give you access to a font-acme utility class.

Defining a theme variable in the --breakpoint-* namespace like this:

@theme {
  --breakpoint-3xl: 120rem;
}

Will give you access to a new responsive variant like this:

<div class="flex flex-col 3xl:flex-row">
 <!-- ... -->
</div>

Links

• Theme variable namespaces – Tailwind docs