Overview

Tailwind is a framework for building custom designs, and different designs need different typography, colors, shadows, breakpoints, and more.

These low-level design decisions are often called design tokens, and in Tailwind projects you store those values in 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:

app.css

@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:

Theme variables