Colors & Opacity

Colors & Opacity

Tailwind includes a vast color palette out of the box, available across every color-related utility.

The palette

Each color has 11 steps from 50 (lightest) to 950 (darkest):

<div class="bg-sky-50"></div>
<div class="bg-sky-500"></div>
<div class="bg-sky-950"></div>

Default colors include: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, and more.

Color utilities

The palette works across all color utilities:

Adjusting opacity

Use / to set opacity:

<div class="bg-sky-500/50"></div>
<div class="bg-pink-500/[71.37%]"></div>

bg-sky-500/50 sets the alpha channel to 50%.

Custom colors with @theme

Add your own colors under the --color-* namespace:

@theme {
  --color-midnight: #121063;
  --color-tahiti: #3ab7bf;
}

Now bg-midnight, text-tahiti, etc. exist. Override defaults by redefining the same name, or disable defaults with --color-*: initial.

Referencing colors in CSS

Colors are exposed as CSS variables:

.typography {
  color: var(--color-gray-950);
}

TL;DR

• 11 shades per color (50-950).
• Palette works on bg, text, border, ring, shadow, and more.
• / sets opacity: bg-sky-500/50.
• @theme adds or overrides colors.