Colors: Background, Text, Border, and Opacity

Tailwind's Color System

Tailwind includes a curated palette of 22 named color families (slate, gray, zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white, black). Each family has shades from 50 (lightest) to 950 (darkest).

• bg-sky-500 — background color.
• text-slate-700 — text color.
• border-rose-400 — border color.
• ring-violet-300 — outline ring color.
• shadow-amber-200/50 — shadow color with 50% opacity.

Opacity Modifier

Append /opacity to any color utility to control alpha. This uses CSS color-mix() in v4, so it works on any color including custom tokens.

<div class="bg-sky-500/20 border border-sky-500/40 text-sky-900">
  Semi-transparent sky background
</div>