Backgrounds and Borders

Colors

Tailwind ships a carefully designed palette. Every color has 11 shades (50, 100, 200 … 900, 950), and the same names power text, background, border and ring utilities.

One palette, many utilities

The color name and shade are reused everywhere: text-sky-600, bg-sky-600, border-sky-600, ring-sky-600. Learn the palette once and it applies across the whole framework.

Shades of one color

Example

<div class="flex gap-2 flex-wrap">
  <div class="w-16 h-16 rounded bg-sky-100"></div>
  <div class="w-16 h-16 rounded bg-sky-300"></div>
  <div class="w-16 h-16 rounded bg-sky-500"></div>
  <div class="w-16 h-16 rounded bg-sky-700"></div>
  <div class="w-16 h-16 rounded bg-sky-900"></div>
</div>

💡

A reliable pattern: 50/100 for subtle backgrounds, 500/600 for buttons and accents, 700/800 for text and hover states.

Colors

One palette, many utilities

Related Tailwind Topics