Colours and typography

Colour and type utilities make up most of a component's visual style.

Colours come from a default palette of more than twenty hues (red, orange, amber, yellow, green, emerald, teal, sky, blue, indigo, violet, purple, pink, rose and others, plus several grays such as slate, gray, zinc and stone), each with shades from 50 (lightest) to 950 (darkest), defined in oklch. Use them with any colour utility:

text-gray-700, bg-indigo-600, border-red-500, ring-blue-500, fill-current, decoration-sky-400,
plus black, white, transparent and current (currentColor).

The opacity modifier adds alpha with a slash: bg-black/50, text-white/80, border-gray-900/10. It works on every colour utility, replacing v3's separate bg-opacity-* classes.

Typography:

size: text-xs, text-sm, text-base (1rem), text-lg up to text-9xl. Each size comes with a matching default line height.
line height override in the same class: text-lg/7 (size lg, leading 7 spacing units), or separately leading-tight, leading-6.
weight: font-normal, font-medium, font-semibold, font-bold.
family: font-sans, font-serif, font-mono.
tracking-tight, uppercase, italic, underline, truncate (single line with ellipsis), line-clamp-3, text-balance for nicer headings, text-center.

Choose shades with contrast in mind: text-gray-500 on white is fine for secondary text, but lighter grays usually fail WCAG for body copy.

Example

<article class="max-w-prose">
  <p class="text-sm font-semibold tracking-wide text-indigo-600 uppercase">Release notes</p>
  <h1 class="mt-2 text-4xl font-bold tracking-tight text-balance text-gray-900">
    Faster builds in version 4
  </h1>
  <p class="mt-4 text-lg/8 text-gray-600">
    The new engine is up to 5x faster for full builds.
  </p>
  <a href="/changelog" class="font-medium text-indigo-600 underline decoration-indigo-300 underline-offset-4">
    Read the changelog
  </a>
  <div class="mt-6 rounded-lg border border-gray-900/10 bg-indigo-50 p-4 text-indigo-900">
    Tip: bg-black/50 means black at 50% opacity.
  </div>
</article>

Remember

Shades run 50 (light) to 950 (dark) on every hue
A slash adds opacity to any colour: bg-black/50
text-lg/7 sets font size and line height together
Check contrast for text colours

Watch out for

Using v3's bg-opacity-50 class, which v4 removed; use bg-black/50.

Check yourself

Which class gives a red-500 border at 25% opacity?

Official docs: tailwindcss.com/docs/colors

Example

Remember

Watch out for

Check yourself

Builds on

Unlocks