Background Color
Fill elements with bg-* color utilities.
Syntax
class="bg-cyan-500"Set a background with bg-{color}-{shade}. Use bg-transparent, bg-white, and bg-black for the basics.
Backgrounds pair well with state and dark prefixes, e.g. hover:bg-cyan-600 dark:bg-slate-800.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer fills a hero section with a brand-colored background using bg-indigo-600 without writing any CSS.
- A status row in a table uses bg-red-50 to softly highlight error rows while keeping the text readable.
- A card hover state switches from bg-white to bg-gray-50 using hover:bg-gray-50 to signal interactivity.
More examples
Solid background color
bg-indigo-600 fills the div with a solid indigo background; text-indigo-100 provides a lighter tint for secondary text on the dark surface.
<div class="bg-indigo-600 text-white p-8 rounded-lg">
<h2 class="text-2xl font-bold">Feature Spotlight</h2>
<p class="mt-2 text-indigo-100">Background set with a single utility class.</p>
</div>Hover background change
hover:bg-gray-50 subtly darkens the card background on hover, providing visual feedback that the card is interactive.
<div class="bg-white hover:bg-gray-50 border rounded-lg p-6 transition-colors cursor-pointer">
<p class="font-medium text-gray-900">Clickable card</p>
<p class="text-sm text-gray-500">Hover to see background change.</p>
</div>Semantic row highlight
Light semantic background shades (red-50, green-50) give table rows an immediate status colour without being visually overpowering.
<tr class="bg-red-50">
<td class="px-4 py-2 text-red-700 font-medium">Failed</td>
<td class="px-4 py-2 text-gray-700">Payment not processed</td>
</tr>
<tr class="bg-green-50">
<td class="px-4 py-2 text-green-700 font-medium">Paid</td>
<td class="px-4 py-2 text-gray-700">Invoice #1042</td>
</tr>
Discussion