| Class | Properties |
|---|---|
.bg-inherit | background-color: inherit; |
.bg-transparent | background-color: transparent; |
.bg-base | background-color: $bg_color; |
Usage
Use .bg-{color} to control the background color of an element.
Background color utilities are generated for all colors defined in the theme’s Sass $colors variable. By default this includes all colors except for the Heading, Text, Link and Outline theme colors.
<div class="bg-red-500"></div>
<div class="bg-green-500"></div>
<div class="bg-orange-500"></div>
<div class="bg-gray-500"></div>Variants
By default, both responsive or hover-state variants are generated for background color utilities.
Responsive
To control the background color for an element at a specific breakpoint, add a {screen}: prefix to any existing background color utility.
For example, use .md:bg-gray-100 to apply the bg-gray-100 utility at only medium screen sizes and above.
Hover-state
To control the background color for an element’s hover state, add a hover: prefix to any existing background color utility.
For example, use .hover:bg-gray-100 to apply the bg-gray-100 utility when the element’s hover state is active.