Color System & Opacity in Tailwind CSS

From the Tailwind CSS cheat sheet · Colors & Opacity · verified Jul 2026

Color System & Opacity

Apply colors with the built-in palette and opacity shorthand.

html

<!-- Colors use shade-50 to shade-950 -->
<p class="text-blue-500">Blue text</p>
<div class="bg-gray-100 border-gray-300">Box</div>

<!-- Opacity modifier — append /opacity -->
<div class="bg-blue-500/75">75% opacity blue</div>
<div class="bg-black/50">50% opacity black</div>
<div class="text-white/80">80% opacity white</div>

💡 Append /opacity to any color utility: bg-blue-500/50, text-white/80, ring-red-500/25

⚡ The color scale runs 50-950: use lower numbers for light, higher for dark

📌 In v4, use bg-(--my-var) shorthand to reference CSS custom properties directly

🟢 shadow-xl/20 sets shadow opacity — great for subtle, non-harsh shadows

colorsopacitypalette

Back to the full Tailwind CSS cheat sheet