Theme variables

These low-level design decisions are often called design tokens, and in Tailwind projects you store those values in theme variables.

What are theme variables?#

Theme variables are special CSS variables defined using the @theme directive that influence which utility classes exist in your project.

For example, you can add a new color to your project by defining a theme variable like --color-mint-500:

@import "tailwindcss";

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

Now you can use utility classes like bg-mint-500, text-mint-500, or fill-mint-500 in your HTML:

<div class="bg-mint-500">
  <!-- ... -->
</div>

Tailwind also generates regular CSS variables for your theme variables so you can reference your design tokens in arbitrary values or inline styles:

<div class="nth-3:underline">
  <!-- ... -->
</div>
<div class="nth-last-5:underline">
  <!-- ... -->
</div>
<div class="nth-of-type-4:underline">
  <!-- ... -->
</div>
<div class="nth-last-of-type-6:underline">
  <!-- ... -->
</div>

Relationship to utility classes#

Every theme variable is automatically mapped to one or more utility classes. When you define a color token under --color-*, Tailwind makes it available for text colors, backgrounds, borders, rings, and gradients.

Customizing your theme#

You can customize your theme by extending the default theme or overriding it entirely.