kimakasad

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

Customizing your theme#

You can customize theme variables using arbitrary values or utility classes.

ajasdasdasdasdasd