Tailwind Background Color

The Tailwind background color utility classes are used to add a background color to an element. With Tailwind's background color classes, you can quickly apply colors to elements without writing custom CSS.

Applying Tailwind Background Color

To apply a Tailwind background color to an element, you can use the bg-{color} utility class, where {color} represents the desired color. Tailwind CSS provides a wide range of color options that you can use out of the box.

<button class="bg-blue-500... ">element has a blue background</button>

Preview

Color Variants

Tailwind background color includes color variants that you can use to modify the brightness or opacity of a color. These color variants are specified using a number from 100 to 900. For example, you can use bg-red-100 for a lighter shade of red and bg-red-900 for a darker shade of red. Here's an example:

<div>
  <div>
    <button class="bg-red-400 ....">element has a red background</button>
    <button class="bg-red-500 ....">element has a red background</button>
  </div>
</div>

Preview

In the above example, the bg-red-400 class is applied to the first<button> element, setting its background color to a lighter shade of red. The bg-red-900 class is applied to the second <button> element, setting its background color to a darker shade of red.

Custom Tailwind Colors

Tailwind CSS also allows you to define your own custom colors in the configuration file. Once defined, you can use your custom colors with the bg-{color} utility class. Here's an example of using a custom color:

<div class="bg-custom-blue">
  This element has a custom blue background color.
</div>

In the above example, a custom color called custom-blue is defined in the Tailwind CSS configuration file. The bg-custom-blue class is applied to the <div> element, setting its background color to the defined custom blue color.

Responsive Tailwind Background Color

Tailwind CSS allows you to apply background colors responsively at different breakpoints. To use responsive Tailwind background color classes, you can append the breakpoint prefix to the background color class. For example, md:bg-green-500 applies the green background color starting from the medium breakpoint and above. Here's an example:

<div class="bg-blue-500 md:bg-green-500">
  This element has a blue background color by default, but changes to green
  starting from the medium breakpoint.
</div>

In the above example, the bg-blue-500 class is applied by default, setting the background color to blue. However, starting from the medium breakpoint and above (md:bg-green-500), the background color changes to green.

Tailwind Background Color Classes table

Windframe Tailwind blocks

Timeline