Tailwind theme variables

What are Tailwind theme variables?

Theme variables are special CSS variables defined using the @theme directive that can influence what utility classes are available in your project.

Here’s an example --color-mint-500 theme variable:

@import "tailwindcss";

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

Because this variable uses the special --color-* namespace, Tailwind will make available a variety of colour-based utility classes like bg-mint-500, text-mint-500 and fill-mint-500:

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

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

<div style="background-color: var(--color-mint-500)">
  <!-- ... -->
</div>

Tailwind’s default theme variables

When you import Tailwind via something like @import 'tailwindcss', Tailwind imports its theme.css file under the hood which includes a number of default theme variables that you can view here.

Here’s an excerpt from Tailwind’s theme.css file:

@theme default {
  --font-sans:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);

  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);

  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
   /* The rest of the theme variables .. */
}

Customising Tailwind’s default theme variables

To customise a default theme variable like color-red-50, simplify define the variable in side a @theme directive like so:

@theme {
  --color-red-50: <some-other-colour>
}

Links

• Theme variables – Tailwind docs