Lesson 7 of 3023%
(Progress persistence is disabled until Phase 9)
Tailwind CSS
Beginner
Background Colors
Applying background colors to elements.
Background colors follow the same pattern as text colors: bg-{color}-{shade}.
Examples
<div class="bg-gray-100 p-4">
<p class="bg-yellow-200">Highlighted text</p>
</div>Pairing Backgrounds and Text
Always ensure good contrast between your bg- and text- classes.
<!-- Good Contrast -->
<div class="bg-blue-900 text-blue-50">...</div>
<!-- Bad Contrast -->
<div class="bg-blue-500 text-blue-600">...</div>