Colors

Code

<div class="bg-blue-500 text-white">Background + text</div>
<p class="text-red-600">Error text</p>
<div class="border border-gray-300">Bordered box</div>

<!-- Color shades from 50 to 950 -->
<button class="bg-emerald-500 hover:bg-emerald-600">500 / 600</button>
<button class="bg-emerald-100 text-emerald-800">100 / 800</button>

<!-- Opacity modifiers -->
<div class="bg-black/50 backdrop-blur">50% overlay</div>
<p class="text-blue-600/75">75% opacity text</p>

<!-- Gradient -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  Gradient
</div>

Explanation

Tailwind ships a default palette where each color has shades 50-950, accessed as bg-*, text-*, border-*. The /opacity suffix (bg-black/50) sets alpha without a separate utility. Gradients use from-*, to-*, and via-* with bg-gradient-to-* for direction.

More Tailwind CSS Snippets