Hit enter after type your search item

Tailwind CSS Background Color utilities

Setting background colors by Tailwind background utility classes

For controlling the background color of web page elements, you may use the background utility classes of Tailwind. These classes:

  • Start with the prefix bg
  • This is followed by a dash ()
  • Then use the color name and its number

For example:

bg-gray-50

bg-gray-500

bg-zinc-50

bg-zinc-950

bg-neutral-50

bg-neutral-950

bg-red-50

bg-red-950

bg-orange-50

bg-orange-950

and so on.

See the complete list on the official website:

https://tailwindcss.com/docs/background-color

The examples below show using background color classes in various HTML elements.

An example of using background classes in buttons

In the first example of demonstrating usage of Tailwind background color classes, we will use these in controlling the button colors.

For that, we have created six buttons where we set the Tailwind width, padding, and background colors of the buttons.

See online demo and code

Code:


Output:

tailwind-bg-color-butto

Using background color in a table example

In the demo below, we used background color in the HTML table. Again, we styled the table by other tailwind classes and also used background color for the table head and data as shown below:

tailwind-bg-color-table

See online demo and code

Using background color in paragraph example

Now we are using background color and other classes in the paragraphs.

Five paragraphs are created where we applied different bg colors, margins, width, text colors and alignments as follows:

tailwind-bg-color-para

See online demo and code

Apply background color on hover state example (buttons)

Tailwind has the ability to apply different utility classes in various states including hover.

For that, you may use the variant modifiers. For example, you may use the following for applying the background color on the hover state to an element like button:

hover:bg-orange-600

See the example below where we extended the above button example and added classes for the hover state.

After opening the demo page, bring the mouse over any button to see how the background color changes.

tailwind-bg-color-hover

See online demo and code

Hover state example in a table

In the example below, we used different background colors in the hover state of the table. As you bring the mouse over the table header or table data (th and td), the background and text color change.

Click on the demo link to have a look yourself:

bg-color-hover-table

See online demo and code

How to use a custom background color in Tailwind

In situations where you need to use some other color than available in the Tailwind pre-defined classes while still using Tailwind – you can do this as follows.

An example of using arbitrary value:

<p class=”bg-[#408080]”>

So, you can use square brackets to generate the value on the fly.

See an example below we use this in the paragraph’s background colors:

See online demo and code


Output:

bg-color-arbitrary

Using different background colors for various devices

Tailwind also enables you to utilize variant modifiers for targeting media queries.

For example, you may use a different background color for a desktop/notebook and some other for a smartphone or tablet – quite easily.

Similarly, you may use different colors for light or dark modes for the same elements.

How to do this? An example is below:

bg-gray-600 lg:bg-red-700

That means, using red color for large screen and gray-600 in small and medium screens.

For quickly viewing a demo, click on the link below and see the demo page on large screen and resize to a small size to see how its color change:

See online demo and code


Output:

bg-color-breakpoint

This div height required for enabling the sticky sidebar