Color Systems and Backgrounds

A great design relies on consistent color palettes. Tailwind CSS provides a pre-curated color palette with multiple shade increments and modern gradient properties.

1. The Color Palette Scale

Tailwind includes standard colors (such as slate, red, blue, emerald, amber). Each color has 10 shade steps ranging from 50 (lightest tint) to 950 (darkest shade):

bg-blue-50     # Very light background hint
bg-blue-100    # Light banner background
...
bg-blue-500    # Primary brand color (default button state)
...
bg-blue-900    # Deep dark text or header background
bg-blue-950    # Extreme dark background

You can apply these color scales to:

• Backgrounds: bg-gray-100, bg-blue-600.
• Text: text-red-500, text-slate-800.
• Borders: border-emerald-300.

2. Color Opacity Modifiers

You no longer need to write custom rgba values to set transparency. You can adjust the opacity of any color by appending a slash followed by an opacity percentage value:

<!-- Background color set to 20% opacity -->
<div className="bg-blue-500/20 text-blue-700 p-4 rounded">
  Alert: Operation success!
</div>

Supported opacity values include: /5, /10, /20, /25, /50, /75, /90, /100.

3. Creating Background Gradients

Tailwind makes it easy to build CSS gradients without writing complex gradient formulas.

To create a gradient background:

1. Define the gradient direction: bg-gradient-to-r (to right), bg-gradient-to-tr (to top-right).
2. Set the starting color: from-blue-500.
3. Set the ending color: to-purple-600.
4. (Optional) Set middle color steps: via-indigo-500.

<!-- Banner with a rich gradient background -->
<div className="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-600 p-8 text-white rounded-lg">
  <h2 className="text-2xl font-bold">Discover New Horizons</h2>
  <p className="mt-2 text-white/90">Experience lightning-fast rendering speeds today.</p>
</div>