Part 29: Text Colors, Background Colors & Opacity Modifiers

Tailwind includes an acclaimed 22-color default palette, each carefully tuned across 10 brightness steps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).

1. The Color Palette

Colors include slate, gray, zinc, neutral, red, amber, emerald, teal, sky, blue, indigo, purple, and rose.

<!-- Step 50 to 900 scale -->
<div class="bg-blue-50 text-blue-900 p-4 rounded">Subtle Alert</div>
<div class="bg-blue-600 text-white p-4 rounded">High Contrast</div>

2. Slash Notation for Color Opacity

Modern Tailwind lets you add opacity directly to any color using /opacity: - bg-blue-500/20: Blue 500 with 20% opacity. - text-slate-900/80: Slate 900 with 80% opacity. - border-black/10: Subtle 10% black border.

<div class="bg-blue-500/10 text-blue-700 border border-blue-500/20 p-4 rounded-xl">
  Soft translucent alert box without defining custom rgba colors!
</div>

Key Takeaways

• Use 50–100 shades for backgrounds and 700–900 shades for text.
• Use /opacity slash notation for effortless alpha-channel transparency.

In Part 30, we will explore Text Transforms, Decorations & Line-Clamp!