Tailwind Background Color Class: A Comprehensive Guide
In this article, we’ll explore Tailwind Background Color class in more detail, including available values and best practices for using it effectively.
Background colors are a crucial aspect of web design, as they can help set the tone and mood of a webpage, provide visual hierarchy, and even convey branding.
In Tailwind CSS, the Background Color class is a versatile and powerful utility that provides a quick and easy way to set the background color of an element.
Tailwind Background Color
Tailwind CSS offers a comprehensive set of classes to define the background color of HTML elements.
This class is an alternative to the CSS background-color property and covers all possible variations.
By using Tailwind’s background color class, you can easily define the background color of an element, including its padding and border.
Syntax
<element class="background-{color}"></element>
Tailwind Background Color Values
- background-transparent : Sets the background color to transparent.
- background-current : The background color depends on the parent element’s color.
- background-black : Sets the background color to black.
- background-white : Sets the background color to white.
- background-gray-{intensity} : Sets the background color to a shade of gray. The {intensity} value ranges from 50 to 900, with 50 being the lightest and 900 being the darkest.
- background-red-{intensity} : Sets the background color to a shade of red.
- background-blue-{intensity} : Sets the background color to a shade of blue.
- background-indigo-{intensity} : Sets the background color to a shade of indigo.
- background-purple-{intensity} : Sets the background color to a shade of purple.
- background-green-{intensity} : Sets the background color to a shade of green.
- background-yellow-{intensity} : Sets the background color to a shade of yellow.
- background-pink-{intensity} : Sets the background color to a shade of pink.
To use the background color class, add the class background-{color} to the element, where {color} is the desired background color.
Below are examples of how to use Tailwind background color classes:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-transparent p-2 border-2 border-slate-400">
bg-transparent
</p>
</div>
</body>
</html>
This is an example of bg-current class:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<p class="font-semibold my-2">Text is same color as background</p>
<p class="font-medium text-sm text-gray-600 my-2">You can highlight the text using your mouse</p>
<div class="mx-14 bg-gray-200 text-center p-4 font-semibold">
<p class="bg-current text-red-500 p-2">
bg-current
</p>
</div>
</body>
</html>
Using bg-black as an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-black text-white p-2">
bg-black
</p>
</div>
</body>
</html>
Using bg-white as an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 text-center p-4 font-semibold">
<p class="bg-white p-2">
bg-white
</p>
</div>
</body>
</html>
As an example, here is a bg-gray-400 class in use:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-gray-400 p-2">
bg-gray
</p>
</div>
</body>
</html>
This is an example of bg-red-700 class:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-red-700 p-2">
bg-red
</p>
</div>
</body>
</html>
Using bg-blue-700 as an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-blue-700 p-2">
bg-blue
</p>
</div>
</body>
</html>
As an example, here is a bg-indigo-700 class in use:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 text-center p-4 font-semibold">
<p class="bg-indigo-700 p-2">
bg-indigo
</p>
</div>
</body>
</html>
Using bg-purple-700 as an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-purple-700 p-2">
bg-purple
</p>
</div>
</body>
</html>
Using bg-green-700 as an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 text-center p-4 font-semibold">
<p class="bg-green-700 p-2">
bg-green
</p>
</div>
</body>
</html>
The following is an example using bg-yellow-400 class:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-green-200 text-center p-4 font-semibold">
<p class="bg-yellow-400 p-2">
bg-yellow
</p>
</div>
</body>
</html>
The following is an example using bg-pink-500 class:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-2">Background Color Class in Tailwind CSS</p>
<div class="mx-14 bg-gray-200 text-center p-4 font-semibold">
<p class="bg-pink-500 p-2">
bg-pink
</p>
</div>
</body>
</html>
It’s worth noting that when you use the background-current class, the background color will be the same as the text color.
This means that the text will be invisible, but it is still present in the HTML code.
