Background Color

Below, utility classes to apply background-color property.

Class	Properties
.bg-<color>-<tint>	background-color: var(--#{$color}-#{$tint});

Example(s)

<div class="bg-gray-500 ..."></div>
<div class="bg-deep-orange-500 ..."></div>
<div class="bg-yellow-500 ..."></div>
<div class="bg-green-500 ..."></div>
<div class="bg-indigo-500 ..."></div>

Pseudo Classes

background-color is supported by changing state on-the-fly! You can use it like this:

<button class="bg-indigo-500 hover:bg-indigo-600 focus:bg-indigo-700 disabled:bg-indigo-300">...</button>