Tailwind CSS 背景颜色语法
在 Tailwind CSS 中，我们可以使用 “bg-*” 相关类名来定义元素的背景颜色（相当于传统 CSS 中的 background-color）。
语法：
bg-{颜色}-{色阶}说明：
“颜色” 是颜色的英文名，比如 red（红）、blue（蓝）、green（绿）、gray（灰）等。
“色阶” 取值范围通常是 50~950。值越小，颜色越浅；值越大，颜色越深。一般来说，500 是最标准的基础色。
除了带色阶的颜色，Tailwind 还提供了 4 种特殊背景颜色，如下表所示。
| 类名 | 说明 |
|---|---|
| bg-black | 纯黑（#000000） |
| bg-white | 纯白（#FFFFFF） |
| bg-transparent | 全透明 |
| bg-current | 继承当前元素的文本颜色，等价于 background-color: currentColor; |
此外，如果想要为背景颜色设置不透明度，我们可以使用 “斜杠后缀” 的方式。比如想要定义一个 50% 不透明度的绿色背景，可以这样写：
bg-green-500/50其中，斜杠后面的数字代表就是不透明度的百分比。
Tailwind CSS 背景颜色示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的背景颜色。
示例 1：使用背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<button class="px-6 py-2 bg-red-400">
绿叶网
</button>
<button class="px-6 py-2 bg-green-400">
绿叶网
</button>
<button class="px-6 py-2 bg-blue-400">
绿叶网
</button>
</body>
</html>页面效果如下图所示。
Tailwind CSS 背景颜色 “任意值”
在实际项目开发中，大多数网站往往都会设计一个专属的 “品牌色”（十六进制代码），比如咱们绿叶网的品牌色就是 “#19b694”。
在 Tailwind CSS 中，我们可以使用中括号 “[]” 语法来定义任意值的背景颜色。
语法：
bg-[颜色值]说明：
这个 “颜色值” 一般是十六进制代码。
示例 2：使用任意值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<button class="px-6 py-2 bg-[#19b694]">
绿叶网
</button>
</body>
</html>页面效果如下图所示。
分析：
关于任意值的详细语法，我们在后面 “Tailwind CSS 任意值” 一节中会详细介绍。
常见问题
1. 为什么我给元素设置了背景颜色，页面上却什么也看不到呢？
很可能是因为元素没有内容或者没有定义宽高。在 CSS 中，空的块级元素默认高度为 0。你可以尝试添加一些文字，或者手动给元素设置 “w-*” 和 “h-*” 类名，背景颜色就会显现出来了。
2. 背景颜色和文本颜色冲突了怎么办？
这是一个经典的视觉设计问题。如果你使用了深色背景（如 bg-blue-900），务必要配合浅色文字（如 text-white）；反之亦然。小伙伴们可以参考绿叶网的设计风格，养成“深底浅字、浅底深字” 的设计好习惯。
