Tailwind CSS 定义文本颜色
在 Tailwind CSS 中，我们可以使用 “text-*” 相关类名来定义文本的颜色（相当于传统 CSS 中的 color）。
语法：
text-{颜色}-{色阶}说明：
“颜色” 是颜色的英文名，比如 red（红）、blue（蓝）、green（绿）、gray（灰）等。
“色阶” 取值范围通常是 50~950。值越小，颜色越浅；值越大，颜色越深。一般来说，500 是最标准的基础色。
除了带色阶的颜色，Tailwind CSS 还提供了4 种常用的特殊颜色，如下表所示。
| 类名 | 说明 |
|---|---|
| text-black（默认） | 纯黑（#000000） |
| text-white | 纯白（#FFFFFF） |
| text-transparent | 全透明 |
| text-current | 基础父元素颜色，等价于 color: currentColor; |
如果想要为文本颜色设置不透明度，我们可以使用 “斜杠后缀” 的方式。比如想要定义一个 50% 不透明度的绿色文字，可以这样写：
text-green-500/50其中，斜杠后面的数字代表就是不透明度的百分比。
示例 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">
<p class="text-gray-400">
绿叶网（text-gray-400）
</p>
<p class="text-gray-900">
绿叶网（text-gray-900）
</p>
<p class="text-blue-400">
绿叶网（text-blue-400）
</p>
<p class="text-blue-900">
绿叶网（text-blue-900）
</p>
</body>
</html>页面效果如下图所示。
Tailwind CSS 文本颜色 “任意值”
虽然 Tailwind CSS 提供的调色板已经足够丰富了，但在实际项目开发中，网站往往会设计一个专属的 “品牌色”（十六进制代码），比如咱们绿叶网的品牌色就是 “#19b694”。像这种特殊的颜色，使用 Tailwind CSS 默认类名就无法满足了。
在 Tailwind CSS 中，我们可以使用中括号 “[]” 语法来定义任意值的文本颜色。
语法：
text-[颜色值]说明：
这个 “颜色值” 一般是十六进制代码。
提示: 关于任意值的语法，我们在后面 “Tailwind CSS 任意值” 一节中会详细介绍。
示例 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">
<p class="text-[#0ba352] text-xl font-bold">
绿叶网 - 为好教程，全力以赴
</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 text-[#0ba352] 来定义文本的颜色。Tailwind CSS 编译时，会精准地将这段文字的 color 属性设置为 #0ba352。
Tailwind CSS 鼠标悬停变色
在网页开发中，最常见的文本颜色变化就是：当鼠标放上去时，文字颜色发生改变（通常用于超链接或按钮）。
在 Tailwind CSS 中，我们只需要在颜色类名前面加上 “hover:” 前缀就可以轻松实现鼠标悬停变色了。
语法：
hover:类名示例 3：鼠标悬停变色
<!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">
<a href="#" class="hover:text-red-500">
绿叶网
</a>
</body>
</html>默认情况下，页面效果如下图 1 所示。鼠标移上去，页面效果如下图 2 所示。
分析：
hover:text-red-500 表示当鼠标移到元素上时，将文本的颜色改变为 text-red-500（中等红色）。
