Tailwind Colors and Backgrounds

Tailwind ships with a large built-in color palette. Every color has shades numbered from 50 (lightest) to 950 (darkest). You apply colors to text, backgrounds, borders, and more using consistent class names.

The Color Scale System

Each color in Tailwind has 11 shades. Think of it like a paint strip at a hardware store — one color, many intensities.

Color: blue
─────────────────────────────────────────────────────
blue-50    → Very light blue (almost white tint)
blue-100   → Light blue
blue-200   → Soft blue
blue-300   → Medium-light blue
blue-400   → Medium blue
blue-500   → Standard blue (the base)
blue-600   → Darker blue
blue-700   → Deep blue
blue-800   → Very dark blue
blue-900   → Near-black blue
blue-950   → Darkest blue

Available Base Colors

Neutral tones:   slate, gray, zinc, neutral, stone
Warm tones:      red, orange, amber, yellow
Natural tones:   lime, green, emerald, teal
Cool tones:      cyan, sky, blue, indigo, violet
Bold tones:      purple, fuchsia, pink, rose
Special:         white, black, transparent, current, inherit

Text Color Classes

Class                 CSS Output
────────────────────────────────────────────────
text-black            color: #000
text-white            color: #fff
text-gray-500         color: #6b7280
text-blue-600         color: #2563eb
text-red-400          color: #f87171
text-emerald-700      color: #047857

Usage:
<p class="text-gray-700">This is a paragraph.</p>
<h2 class="text-blue-600">Section Heading</h2>

Background Color Classes

Class                 CSS Output
────────────────────────────────────────────────
bg-white              background-color: #fff
bg-black              background-color: #000
bg-gray-100           background-color: #f3f4f6
bg-blue-500           background-color: #3b82f6
bg-yellow-300         background-color: #fcd34d
bg-transparent        background-color: transparent

Usage:
<div class="bg-blue-500 text-white p-4">Blue box with white text</div>

Color Pairing Diagram

Good contrast pairs (text-color / bg-color):

bg-blue-600   +  text-white       ✓ Dark background, light text
bg-yellow-300 +  text-gray-900    ✓ Light background, dark text
bg-white      +  text-gray-800    ✓ Clean card style
bg-gray-900   +  text-gray-100    ✓ Dark mode style
bg-red-500    +  text-white       ✓ Alert/danger style

Avoid:
bg-yellow-300 +  text-white       ✗ Both light, hard to read
bg-blue-600   +  text-blue-400    ✗ Similar hues, low contrast

Background Image and Gradient Classes

Gradient direction:
bg-gradient-to-r     →  left to right
bg-gradient-to-l     →  right to left
bg-gradient-to-t     →  bottom to top
bg-gradient-to-b     →  top to bottom
bg-gradient-to-tr    →  bottom-left to top-right

Gradient colors:
from-blue-500        →  start color
via-purple-500       →  middle color (optional)
to-pink-500          →  end color

Example:
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6">
  Gradient background
</div>

Visual:
[  blue-500  ─────────────────────── purple-600  ]

Background Size and Position

bg-cover      →  background-size: cover
bg-contain    →  background-size: contain
bg-auto       →  background-size: auto

bg-center     →  background-position: center
bg-top        →  background-position: top
bg-bottom     →  background-position: bottom

bg-no-repeat  →  background-repeat: no-repeat
bg-repeat     →  background-repeat: repeat (tile)

Example — full-screen hero image:
<div class="bg-cover bg-center bg-no-repeat h-screen"
     style="background-image: url('hero.jpg')">
  Hero content
</div>

Opacity for Colors

Add / followed by an opacity value after a color class to control transparency.

bg-blue-500/100   →  fully opaque (default)
bg-blue-500/75    →  75% opaque
bg-blue-500/50    →  50% opaque (semi-transparent)
bg-blue-500/25    →  25% opaque
bg-blue-500/10    →  10% opaque (very faint)

text-gray-800/80  →  80% opaque text

This replaces the older bg-opacity-50 approach.