Colors and opacity

Tailwind comes with a ready palette: about twenty colors with 11 shades each. You put the color into the class name together with the property it applies to — text, background or border.

Color and shade

A color name is a hue plus a shade number: blue-500, gray-100, rose-700. The bigger the number, the darker the color:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex">
  <div class="size-12 bg-indigo-50"></div>
  <div class="size-12 bg-indigo-200"></div>
  <div class="size-12 bg-indigo-400"></div>
  <div class="size-12 bg-indigo-600"></div>
  <div class="size-12 bg-indigo-800"></div>
  <div class="size-12 bg-indigo-950"></div>
</div>

Below the code is a row of squares from almost white to dark blue. The shades are 50, 100, 200 and so on in hundreds up to 900, plus 950.

The main palette colors are red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose and the grays slate, gray, zinc, neutral, stone. There are also black, white and transparent without numbers.

Where the color goes

The prefix before the color says what to paint:

Let us style a "Bestseller" badge for the product card:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<span class="rounded border border-amber-300 bg-amber-100 px-2 py-1 text-sm text-amber-800">
  Bestseller
</span>

A light background, a slightly darker border and dark text of the same hue — a common pattern for labels and notices.

Opacity

A slash after the color sets the opacity in percent: bg-black/50 is a black background at half opacity. It is handy for a shade over an image:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="relative w-80">
  <img src="/media/photo-400x250.jpg" alt="Headphones">
  <p class="absolute bottom-0 w-full bg-black/60 p-3 text-white">New this week</p>
</div>

The image shows through the dark strip, and the white text on it is easy to read. The modifier works with any color: text-indigo-600/75, border-white/20.

Common mistake

Building a color name from pieces in JavaScript:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p id="price">$79</p>
<script>
  const color = 'green';
  document.getElementById('price').className = `text-${color}-600`;
</script>

It works with the browser script, but not in a Vite or CLI project: at build time Tailwind looks for complete class names in your files and never sees text-green-600. Write names in full, for example pick them from an object like { ok: 'text-green-600', error: 'text-red-600' }.