How does Tailwind's color system work?

Beginner

Answer

Tailwind uses a numbered color scale from 50 (lightest) to 950 (darkest):

Color scale:

  • 50 - Very light tint
  • 100, 200, 300 - Light shades
  • 400, 500, 600 - Medium shades (500 is the base)
  • 700, 800, 900 - Dark shades
  • 950 - Very dark shade

Usage examples:

  • bg-blue-500 - Blue background (medium blue)
  • text-gray-700 - Dark gray text
  • border-red-200 - Light red border

This system provides consistent color relationships across your design.