tailwindcss/docs/source/backgrounds.md

extends	title
_layouts.markdown	Backgrounds

Backgrounds

Colors Responsive Customizing

Colors

.bg-light

.bg-light-soft

.bg-light-softer

.bg-light-softest

.bg-dark

.bg-dark-soft

.bg-dark-softer

.bg-dark-softest

.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;
  });
}

Customizing

To customize the available background colors, start by creating a copy of the default @bg-colors variable in your own Less file:

@bg-colors:
  'light'           @color-white,
  'light-soft'      @color-grey-200,
  'light-softer'    @color-grey-300,

  'dark'            @color-grey-900,
  'dark-soft'       @color-grey-800,
  'dark-softer'     @color-grey-700,

  'red-dark'        @color-red-dark,
  'red'             @color-red,
  'red-light'       @color-red-light,
  'red-lightest'    @color-red-lightest,

  'orange-dark'     @color-orange-dark,
  'orange'          @color-orange,
  'orange-light'    @color-orange-light,
  'orange-lightest' @color-orange-lightest,

  'yellow-dark'     @color-yellow-dark,
  'yellow'          @color-yellow,
  'yellow-light'    @color-yellow-light,
  'yellow-lightest' @color-yellow-lightest,

  'green-dark'      @color-green-dark,
  'green'           @color-green,
  'green-light'     @color-green-light,
  'green-lightest'  @color-green-lightest,

  'teal-dark'       @color-teal-dark,
  'teal'            @color-teal,
  'teal-light'      @color-teal-light,
  'teal-lightest'   @color-teal-lightest,

  'blue-dark'       @color-blue-dark,
  'blue'            @color-blue,
  'blue-light'      @color-blue-light,
  'blue-lightest'   @color-blue-lightest,

  'indigo-dark'     @color-indigo-dark,
  'indigo'          @color-indigo,
  'indigo-light'    @color-indigo-light,
  'indigo-lightest' @color-indigo-lightest,

  'purple-dark'     @color-purple-dark,
  'purple'          @color-purple,
  'purple-light'    @color-purple-light,
  'purple-lightest' @color-purple-lightest,

  'pink-dark'       @color-pink-dark,
  'pink'            @color-pink,
  'pink-light'      @color-pink-light,
  'pink-lightest'   @color-pink-lightest,
;

If you don't need certain background colors, remove them or comment them out to prevent those utilities from being generated:

@bg-colors:
  // ...

  // 'yellow-dark'     @color-yellow-dark,
  // 'yellow'          @color-yellow,
  // 'yellow-light'    @color-yellow-light,
  // 'yellow-lightest' @color-yellow-lightest,

  'green-dark'      @color-green-dark,
  'green'           @color-green,
  'green-light'     @color-green-light,
  'green-lightest'  @color-green-lightest,

  // 'teal-dark'       @color-teal-dark,
  // 'teal'            @color-teal,
  // 'teal-light'      @color-teal-light,
  // 'teal-lightest'   @color-teal-lightest,

  'blue-dark'       @color-blue-dark,
  'blue'            @color-blue,
  'blue-light'      @color-blue-light,
  'blue-lightest'   @color-blue-lightest,

  'indigo-dark'     @color-indigo-dark,
  'indigo'          @color-indigo,
  'indigo-light'    @color-indigo-light,
  'indigo-lightest' @color-indigo-lightest,

  // 'purple-dark'     @color-purple-dark,
  // 'purple'          @color-purple,
  // 'purple-light'    @color-purple-light,
  // 'purple-lightest' @color-purple-lightest,

  // 'pink-dark'       @color-pink-dark,
  // 'pink'            @color-pink,
  // 'pink-light'      @color-pink-light,
  // 'pink-lightest'   @color-pink-lightest,
;

If you'd like to add new background colors, add them to the end of the @bg-colors variable like so:

@bg-colors:
  // ...

  'brand-primary'     #cf4646,
  'brand-secondary'   #f6c92e,
;

New background color utilities (including responsive versions) will be generated for those colors and can be used in your markup like any other background color utility:

<div class="bg-brand-primary md:bg-brand-secondary">
  <!-- ... -->
</div>