Background Color

Utilities for controlling an element's background color.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.bg-transparent background-color: transparent;
.bg-black background-color: #22292f;
.bg-grey-darkest background-color: #3d4852;
.bg-grey-darker background-color: #606f7b;
.bg-grey-dark background-color: #8795a1;
.bg-grey background-color: #b8c2cc;
.bg-grey-light background-color: #dae1e7;
.bg-grey-lighter background-color: #f1f5f8;
.bg-grey-lightest background-color: #f8fafc;
.bg-white background-color: #ffffff;
.bg-red-darkest background-color: #3b0d0c;
.bg-red-darker background-color: #621b18;
.bg-red-dark background-color: #cc1f1a;
.bg-red background-color: #e3342f;
.bg-red-light background-color: #ef5753;
.bg-red-lighter background-color: #f9acaa;
.bg-red-lightest background-color: #fcebea;
.bg-orange-darkest background-color: #462a16;
.bg-orange-darker background-color: #613b1f;
.bg-orange-dark background-color: #de751f;
.bg-orange background-color: #f6993f;
.bg-orange-light background-color: #faad63;
.bg-orange-lighter background-color: #fcd9b6;
.bg-orange-lightest background-color: #fff5eb;
.bg-yellow-darkest background-color: #453411;
.bg-yellow-darker background-color: #684f1d;
.bg-yellow-dark background-color: #f2d024;
.bg-yellow background-color: #ffed4a;
.bg-yellow-light background-color: #fff382;
.bg-yellow-lighter background-color: #fff9c2;
.bg-yellow-lightest background-color: #fcfbeb;
.bg-green-darkest background-color: #0f2f21;
.bg-green-darker background-color: #1a4731;
.bg-green-dark background-color: #1f9d55;
.bg-green background-color: #38c172;
.bg-green-light background-color: #51d88a;
.bg-green-lighter background-color: #a2f5bf;
.bg-green-lightest background-color: #e3fcec;
.bg-teal-darkest background-color: #0d3331;
.bg-teal-darker background-color: #20504f;
.bg-teal-dark background-color: #38a89d;
.bg-teal background-color: #4dc0b5;
.bg-teal-light background-color: #64d5ca;
.bg-teal-lighter background-color: #a0f0ed;
.bg-teal-lightest background-color: #e8fffe;
.bg-blue-darkest background-color: #12283a;
.bg-blue-darker background-color: #1c3d5a;
.bg-blue-dark background-color: #2779bd;
.bg-blue background-color: #3490dc;
.bg-blue-light background-color: #6cb2eb;
.bg-blue-lighter background-color: #bcdefa;
.bg-blue-lightest background-color: #eff8ff;
.bg-indigo-darkest background-color: #191e38;
.bg-indigo-darker background-color: #2f365f;
.bg-indigo-dark background-color: #5661b3;
.bg-indigo background-color: #6574cd;
.bg-indigo-light background-color: #7886d7;
.bg-indigo-lighter background-color: #b2b7ff;
.bg-indigo-lightest background-color: #e6e8ff;
.bg-purple-darkest background-color: #21183c;
.bg-purple-darker background-color: #382b5f;
.bg-purple-dark background-color: #794acf;
.bg-purple background-color: #9561e2;
.bg-purple-light background-color: #a779e9;
.bg-purple-lighter background-color: #d6bbfc;
.bg-purple-lightest background-color: #f3ebff;
.bg-pink-darkest background-color: #451225;
.bg-pink-darker background-color: #6f213f;
.bg-pink-dark background-color: #eb5286;
.bg-pink background-color: #f66d9b;
.bg-pink-light background-color: #fa7ea8;
.bg-pink-lighter background-color: #ffbbca;
.bg-pink-lightest background-color: #ffebef;

Hover

In addition to the standard responsive variations, background colors also come in hover: variations that apply the given background color on hover.

Hover over this element
<div class="bg-blue hover:bg-purple text-center text-white font-semibold mx-auto px-4 py-2">
  Hover over this element
</div>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<button class="... md:bg-orange md:hover:bg-red ...">Button</button>

Customizing

Responsive and State Variants

By default, only responsive and hover variants are generated for background color utilities.

You can control which variants are generated for the background color utilities by modifying the backgroundColors property in the modules section of your Tailwind config file.

For example, this config will also generate focus variants:

{
// ...
modules: {
    // ...
-   backgroundColors: ['responsive', 'hover'],
+   backgroundColors: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the background color utilities in your project, you can disable them entirely by setting the backgroundColors property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   backgroundColors: ['responsive', 'hover'],
+   backgroundColors: false,
}
}