tailwindcss/docs/source/background-color.blade.md

extends	title
_layouts.markdown	Backgrounds

Background Color

Usage Responsive Customizing

Colors

.bg-slate-lighter

.bg-slate-light

.bg-slate

.bg-slate-dark

.bg-slate-darker

.bg-smoke-lighter

.bg-smoke-light

.bg-smoke

.bg-smoke-dark

.bg-smoke-darker

.bg-red-lighter

.bg-red-light

.bg-red

.bg-red-dark

.bg-red-darker

.bg-orange-lighter

.bg-orange-light

.bg-orange

.bg-orange-dark

.bg-orange-darker

.bg-yellow-lighter

.bg-yellow-light

.bg-yellow

.bg-yellow-dark

.bg-yellow-darker

.bg-green-lighter

.bg-green-light

.bg-green

.bg-green-dark

.bg-green-darker

.bg-teal-lighter

.bg-teal-light

.bg-teal

.bg-teal-dark

.bg-teal-darker

.bg-blue-lighter

.bg-blue-light

.bg-blue

.bg-blue-dark

.bg-blue-darker

.bg-indigo-lighter

.bg-indigo-light

.bg-indigo

.bg-indigo-dark

.bg-indigo-darker

.bg-purple-lighter

.bg-purple-light

.bg-purple

.bg-purple-dark

.bg-purple-darker

.bg-pink-lighter

.bg-pink-light

.bg-pink

.bg-pink-dark

.bg-pink-darker

Using the utilities in HTML:

<div class="bg-white"></div>
<div class="bg-smoke-lighter"></div>
<div class="bg-smoke-light"></div>
<div class="bg-smoke"></div>

<div class="bg-slate-darker"></div>
<div class="bg-slate-dark"></div>
<div class="bg-slate"></div>
<div class="bg-slate-light"></div>

Using the utilities in Less:

div {
  .bg-white;
  .bg-smoke-lighter;
  .bg-smoke-light;
  .bg-smoke;

  .bg-slate-darker;
  .bg-slate-dark;
  .bg-slate;
  .bg-slate-light;
}