Colors

The default palette has 26 families in 11 steps, 50 (lightest) to 950 (darkest), plus black and white: 17 hues, the neutrals slate, gray, zinc, neutral and stone, and the tinted taupe, mauve, mist and olive added in v4.2. Since v4 every step is an OKLCH value (Color Values), such as --color-blue-500: oklch(62.3% 0.214 259.815), which lets the palette use the wider P3 gamut for more vivid colors on modern displays.

Palette steps and opacity modifiersHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div id="out" class="space-y-1 p-3 font-mono text-xs"></div>
<script>
  const row = (label, classes) => out.insertAdjacentHTML("beforeend",
    `<div class="flex gap-1"><b class="w-20">${label}</b>` +
    classes.map((c) => `<i class="h-6 flex-1 rounded ${c}"></i>`).join("") + "</div>");
  const steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
  for (const h of ["sky", "emerald", "rose", "taupe"]) row(h, steps.map((n) => `bg-${h}-${n}`));
  row("sky-500/n", [10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 100].map((a) => `bg-sky-500/${a}`));
</script>

Browser output of 16

Building class names in a loop works here only because the Play CDN reads the live DOM (Class Detection (@source)). The slash is the opacity modifier: bg-sky-500/50 compiles to color-mix(in oklab, var(--color-sky-500) 50%, transparent), so it works on variables and currentColor too, and accepts /[71.37%] or /(--alpha). The palette feeds bg, text, border, outline, shadow, ring, accent, caret, fill, stroke and more.

Add brand colors under --color-*, remove families with --color-lime-*: initial, and for switchable themes map per-theme variables (:root { --ink: ... }, [data-theme=dark] { --ink: ... }) with @theme inline { --color-ink: var(--ink); }, so text-ink changes with no dark: class.

MENU