Tailwind CSS Background Color

The Tailwind CSS background-color utility class sets the background color of an element. It specifies a background color for an HTML element.

Syntax

<div class="bg-{color}">
  <!-- content -->
</div>

• {color} is the name of the color you want to apply as background. It can be any valid Tailwind color name or HEX color code.

Example

<div class="bg-green-500">
  <p>Hello world!</p>
</div>

Output

The above example will apply a background color of green-500 to the div and it will have Hello world! text inside it.

Explanation

The bg-{color} utility class applies a background color to an element. The color can be selected from a list of predefined TailwindCSS color classes or it can be any valid HEX color code.

Use

Use the bg-{color} utility class to change the background color of an element. It can be used on any HTML element like div, span, p, etc.

Important Points

• You can use any valid TailwindCSS color class or HEX color code as background color.

• You can use responsive variants like sm:bg-{color} to apply different background colors at different screen sizes.

• The bg-opacity-{amount} class can be used to add transparency to the background color.

Summary

The bg-{color} utility class in Tailwind CSS is used to apply a background color to an HTML element. It can be used with any TailwindCSS color class or HEX color code to customize the look and feel of the UI. Responsive variants can be used to apply different background colors at different screen sizes.