How to change background color in Tailwind CSS

Ayyaz

@AyyazTech

Welcome to another tutorial in our Tailwind CSS series! If you haven't checked out the complete playlist, you can find it here. In today's tutorial, we'll be focusing on changing background colors using Tailwind CSS. It's an effortless way to enhance your website's aesthetic and make it more visually engaging.

Video Tutorial: 

Introduction

Changing the background color is an effective method to spice up your web designs. From web cards to headers, the right background color can significantly impact the user experience. Fortunately, Tailwind CSS makes it incredibly simple with utility classes. So, let's dive right in and see how to do it!

Setting up a Basic Background Color

Changing the background color in Tailwind is as simple as using the bg utility classes. Here's how to set up a basic background color.

First, create a div and give it a width and height:

<div class="w-64 h-64"></div>

<div class="w-64 h-64"></div>

Next, add the bg utility class with a color and a shade:

<div class="w-64 h-64 bg-blue-500"></div>

<div class="w-64 h-64 bg-blue-500"></div>

In this example, we've set the background color to a specific shade of blue using bg-blue-500.

Real-World Use Cases for Background Color

Designing a Navigation Bar

You often need to change the background color for various elements like a navigation bar. For example:

<nav class="bg-slate-700 h-20">
  <h1 class="text-white">My Website</h1>
</nav>

<nav class="bg-slate-700 h-20">
  <h1 class="text-white">My Website</h1>
</nav>

In this snippet, bg-slate-700 sets a dark slate color for the navigation bar, making the header elements like h1 stand out when styled with text-white.

Creating a Web Card

Another frequent use-case is designing a web card. Here’s a quick example:

<div class="bg-white shadow-md p-4 rounded-md">
  <h2 class="text-gray-700">Card Title</h2>
  <!-- Card content goes here -->
</div>

<div class="bg-white shadow-md p-4 rounded-md">
  <h2 class="text-gray-700">Card Title</h2>
  <!-- Card content goes here -->
</div>

Here, we use the bg-white class to set the background color, and additional classes like shadow-md, p-4, and rounded-md to further style the card.

Advanced Background Color Options

Customizing Tailwind Configuration for Brand Colors

Tailwind is highly customizable. You can add brand-specific colors by modifying the tailwind.config.js file. Here's how to do it:

In the extend section of your tailwind.config.js, add a new background color property:

module.exports = {
  //...
  extend: {
    backgroundColor: {
      'brand-blue': '#007BFF',
      'brand-red': '#FF5733'
    },
  },
}

module.exports = {
  //...
  extend: {
    backgroundColor: {
      'brand-blue': '#007BFF',
      'brand-red': '#FF5733'
    },
  },
}

Now, you can use these custom colors in your HTML just like any other utility class:

<div class="bg-brand-blue">...</div>
<div class="bg-brand-red">...</div>

<div class="bg-brand-blue">...</div>
<div class="bg-brand-red">...</div>

Replacing the Default Color Palette

You can also replace the entire default color palette of Tailwind. This can be useful but be cautious as this removes all default colors:

module.exports = {
  //...
  backgroundColor: {
    'brand-blue': '#007BFF',
    'brand-red': '#FF5733',
    //... other custom colors
  },
}

module.exports = {
  //...
  backgroundColor: {
    'brand-blue': '#007BFF',
    'brand-red': '#FF5733',
    //... other custom colors
  },
}

Conclusion

Changing background colors in Tailwind CSS is as simple or as complex as you make it. With utility classes and advanced configuration options, you have the power to style your projects in any way you see fit. I hope you found this tutorial helpful. If you did, please give it a thumbs up and don’t forget to subscribe for more valuable content!

Happy coding!