Background color

Utilities for controlling an element’s background color.

In this article

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.

Questions or feedback about this article? Let us know