Tailwind CSS Background Colors
In Tailwind CSS,background color(Background Color) is one of the most commonly used utility classes, allowing you to quickly set the background color for elements.
Tailwind provides a variety of color options and different shades, ensuring you can flexibly apply the styles you need.
Basic Background Color Syntax：
<div class="bg-{color}">
<!-- 内容 -->
</div>
Common Background Color Classes：
| Class Name | Description | Example |
|---|---|---|
bg-{color} |
Set the background color | bg-red-500，bg-blue-200 |
bg-transparent |
Set a transparent background color | bg-transparent |
bg-current |
Set the background color to the current text color (commonly used for icon backgrounds) | bg-current |
bg-white |
Set the background color to white | bg-white |
bg-black |
Set the background color to black | bg-black |
bg-gray-{n} |
Set the background color to gray,{n}is the shade of gray (from 50 to 900) |
bg-gray-100, bg-gray-700 |
Background Color Gradients：
Tailwind CSS supports linear gradients, radial gradients, and more for backgrounds. You can usebg-gradient-to-{direction}to specify the direction of the gradient, and usefrom-{color}、to-{color}to set the starting and ending colors of the gradient.
| Class Name | Description | Example |
|---|---|---|
bg-gradient-to-{direction} |
Set the direction of the gradient background,directioncan bet、r、b、l、tr、tl、br、blwait |
bg-gradient-to-r(gradient from left to right) |
from-{color} |
Set the starting color of the gradient background | from-blue-500 |
to-{color} |
Set the ending color of the gradient background | to-green-300 |
via-{color} |
Set the intermediate color of the gradient (optional) | via-purple-400 |
Example
Gradient background from blue to green
</div>
Background Color Opacity（Opacity）：
Tailwind also provides utility classes for controlling background transparency. Usebg-opacity-{value}to set the opacity value,{value}an integer from 0 to 100 representing the percentage of opacity.
| Class Name | Description | Example |
|---|---|---|
bg-opacity-{n} |
Set the opacity of the background color | bg-opacity-50 |
bg-opacity-0 |
Set the background color to fully transparent | bg-opacity-0 |
bg-opacity-100 |
Set the background color to fully opaque | bg-opacity-100 |
Example
Background as a semi-transparent blue
</div>
Custom Background Colors in Tailwind Config：
You cantailwind.config.jscustomize background colors in the config file. By defining colors under thetheme.extendsection'scolorsattribute, you can extend the default color set.
Example
theme: {
extend: {
colors: {
'custom-blue': '#1D4ED8',
'custom-gray': '#4B5563',
}
}
}
}
Use custom background colors in HTML:
Example
Using a custom blue background
</div>
Comprehensive Example
Example
<div class="bg-blue-500 text-white p-6 mb-6">
<h1 class="text-xl">Blue Background</h1>
<p>This is a container with a blue background and white text color.</p>
</div>
<!-- Gradient background example -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white p-6 mb-6">
<h1 class="text-xl">Gradient Background</h1>
<p>This is a linear gradient background, from purple to pink to red.</p>
</div>
<!-- Background opacity example -->
<div class="bg-green-500 bg-opacity-50 text-white p-6">
<h1 class="text-xl">Opacity Background</h1>
<p>This is a container with a semi-transparent green background.</p>
</div>
Try it »
Analysis:
Basic background color：
bg-blue-500: Set the background color to blue.text-white: Set the text color to white.
Gradient background：
bg-gradient-to-r: Set the direction of the gradient background to left to right.from-purple-500: Set the starting color of the gradient to purple.to-red-500: Set the ending color of the gradient to red.
Background opacity：
bg-opacity-50: Set the opacity of the background color to 50% (semi-transparent).