tailwindcss/docs/source/backgrounds.md

extends	title
_layouts.markdown	Backgrounds

Backgrounds

.bg-light

.bg-light-soft

.bg-light-softer

.bg-dark

.bg-dark-soft

.bg-dark-softer

.bg-red-dark

.bg-red

.bg-red-light

.bg-red-lightest

.bg-orange-dark

.bg-orange

.bg-orange-light

.bg-orange-lightest

.bg-yellow-dark

.bg-yellow

.bg-yellow-light

.bg-yellow-lightest

.bg-green-dark

.bg-green

.bg-green-light

.bg-green-lightest

.bg-teal-dark

.bg-teal

.bg-teal-light

.bg-teal-lightest

.bg-blue-dark

.bg-blue

.bg-blue-light

.bg-blue-lightest

.bg-indigo-dark

.bg-indigo

.bg-indigo-light

.bg-indigo-lightest

.bg-purple-dark

.bg-purple

.bg-purple-light

.bg-purple-lightest

.bg-pink-dark

.bg-pink

.bg-pink-light

.bg-pink-lightest

Using the utilities in HTML:

<div class="bg-light"></div>
<div class="bg-light-soft"></div>
<div class="bg-light-softer"></div>
<div class="bg-light-softest"></div>

<div class="bg-dark"></div>
<div class="bg-dark-soft"></div>
<div class="bg-dark-softer"></div>
<div class="bg-dark-softest"></div>

Using the utilities in Less:

div {
  .bg-light;
  .bg-light-soft;
  .bg-light-softer;
  .bg-light-softest;

  .bg-dark;
  .bg-dark-soft;
  .bg-dark-softer;
  .bg-dark-softest;
}

Responsive

The background utitlies can also be used with responsive prefixes:

<!-- Using the utilities in HTML: -->

<div class="bg-dark sm:bg-dark-soft md:bg-dark-softer lg:bg-dark-softest"></div>

// Using the utilities in Less:

div {
  .screen(lg, {
    .bg-light;
  });
}

Custom backgrounds

How to generate custom background utilities:

.define-text-color('primary';
  default #3498db,
  'light' #a0cfee,
  'dark'  #2980b9
;);

How to use custom background utilities:

<!-- Using custom utilities in HTML: -->

<div class="bg-primary"></div>
<div class="bg-primary-light"></div>
<div class="bg-primary-dark"></div>

<!-- Responsive example -->
<div class="bg-primary sm:bg-primary-dark"></div>

// Using custom utilities in Less:

div {
  .bg-primary;
  .bg-primary-light;
  .bg-primary-dark;

  // Responsive example
  .screen(lg, {
    .bg-primary;
  });
}