HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

Tailwind CSS 教程

Tailwind CSS 首页 Tailwind CSS 路线图 Tailwind CSS 简介 Tailwind CSS 安装和环境配置 Tailwind CSS 编辑器设置

Tailwind CSS 核心概念

Tailwind CSS 实用至上基础 Tailwind CSS 悬停、聚焦及其他状态 Tailwind CSS 响应式设计 Tailwind CSS 暗黑模式 Tailwind CSS 样式复用 Tailwind CSS 添加自定义样式 Tailwind CSS 函数和指令

Tailwind CSS 自定义

Tailwind CSS 配置 Tailwind CSS 内容配置 Tailwind CSS 主题配置 Tailwind CSS 自定义屏幕 Tailwind CSS 自定义颜色 Tailwind CSS 自定义间距 Tailwind CSS 插件 Tailwind CSS 预设

Tailwind CSS 基本样式

Tailwind CSS 预检

Tailwind CSS 布局

Tailwind CSS 宽高比 Tailwind CSS 容器 Tailwind CSS 列 Tailwind CSS 后断行 Tailwind CSS 前断行 Tailwind CSS 内断行 Tailwind CSS 盒子装饰断行 Tailwind CSS 盒子大小 Tailwind CSS 显示 Tailwind CSS 浮动 Tailwind CSS 清除 Tailwind CSS 堆叠 Tailwind CSS 对象适配 Tailwind CSS 对象位置 Tailwind CSS 溢出 Tailwind CSS 滚动行为 Tailwind CSS 位置 Tailwind CSS 顶部 / 右侧 / 底部 / 左侧 Tailwind CSS 可见性 Tailwind CSS Z-Index

Tailwind CSS 弹性盒和网格

Tailwind CSS 弹性基础 Tailwind CSS 弹性方向 Tailwind CSS 弹性包裹 Tailwind CSS 弹性 Tailwind CSS 弹性增长 Tailwind CSS Flex Shrink Tailwind CSS 顺序 Tailwind CSS 网格模板列 Tailwind CSS 网格列起始/结束 Tailwind CSS 网格模板行 Tailwind CSS 网格行起始/结束 Tailwind CSS 网格自动排版 Tailwind CSS 网格自动列 Tailwind CSS 网格自动行 Tailwind CSS 间隙 Tailwind CSS 内容对齐 Tailwind CSS 项目对齐 Tailwind CSS 自身对齐 Tailwind CSS 内容对齐 Tailwind CSS 项目对齐 Tailwind CSS 自身对齐 Tailwind CSS 放置内容 Tailwind CSS 放置项目 Tailwind CSS 放置自身

Tailwind CSS 间距

Tailwind CSS 内边距 Tailwind CSS 边距 Tailwind CSS 间距

Tailwind CSS 尺寸

Tailwind CSS 宽度 Tailwind CSS 最小宽度 Tailwind CSS 最大宽度 Tailwind CSS 高度 Tailwind CSS 最小高度 Tailwind CSS 最大高度 Tailwind CSS 尺寸

Tailwind CSS 字体排版

Tailwind CSS 字体系列 Tailwind CSS 字体大小 Tailwind CSS 字体平滑 Tailwind CSS 字体样式 Tailwind CSS 字体粗细 Tailwind CSS 字体变体数字 Tailwind CSS 字母间距 Tailwind CSS 行距限制 Tailwind CSS 行高 Tailwind CSS 列表样式图片 Tailwind CSS 列表样式位置 Tailwind CSS 列表样式类型 Tailwind CSS 文本对齐 Tailwind CSS 文本颜色 Tailwind CSS 文本装饰 Tailwind CSS 文本装饰颜色 Tailwind CSS 文本装饰样式 Tailwind CSS 文本装饰粗细 Tailwind CSS 文本下划线偏移 Tailwind CSS 文本变换 Tailwind CSS 文本溢出 Tailwind CSS 文本换行 Tailwind CSS 文本缩进 Tailwind CSS 垂直对齐 Tailwind CSS 空格 Tailwind CSS 单词换行 Tailwind CSS 连字符 Tailwind CSS -内容

Tailwind CSS 背景

Tailwind CSS 背景附件 Tailwind CSS 背景剪辑 Tailwind CSS 背景颜色 Tailwind CSS 背景原点 Tailwind CSS 背景位置 Tailwind CSS 背景重复 Tailwind CSS 背景大小 Tailwind CSS 背景图片 Tailwind CSS 渐变色标

Tailwind CSS 边框

Tailwind CSS 边框半径 Tailwind CSS 边框宽度 Tailwind CSS 边框颜色 Tailwind CSS 边框样式 Tailwind CSS 分隔宽度 Tailwind CSS 分割颜色 Tailwind CSS 分割样式 Tailwind CSS 轮廓宽度 Tailwind CSS 轮廓颜色 Tailwind CSS 轮廓样式 Tailwind CSS 轮廓偏移 Tailwind CSS 环宽度 Tailwind CSS 环颜色 Tailwind CSS 环偏移宽度 Tailwind CSS 环偏移颜色

Tailwind CSS 效果

Tailwind CSS 框阴影 Tailwind CSS 框阴影颜色 Tailwind CSS 不透明度 Tailwind CSS 混合模式 Tailwind CSS 背景混合模式

Tailwind CSS 滤镜

Tailwind CSS 模糊 Tailwind CSS 亮度 Tailwind CSS 对比度 Tailwind CSS 阴影 Tailwind CSS 灰度 Tailwind CSS 色相旋转 Tailwind CSS 反转 Tailwind CSS 饱和度 Tailwind CSS 棕褐色 Tailwind CSS 背景模糊 Tailwind CSS 背景亮度 Tailwind CSS 背景对比度 Tailwind CSS 背景灰度 Tailwind CSS 背景色相旋转 Tailwind CSS 背景反转 Tailwind CSS 背景不透明度 Tailwind CSS 背景饱和度 Tailwind CSS 背景棕褐色

Tailwind CSS 表格

Tailwind CSS 边框折叠 Tailwind CSS 边框间距 Tailwind CSS 表格布局 Tailwind CSS 侧边标题

Tailwind CSS 过渡和动画

Tailwind CSS 过渡属性 Tailwind CSS 过渡持续时间 Tailwind CSS 过渡计时函数 Tailwind CSS 过渡延迟 Tailwind CSS 动画

Tailwind CSS 变换

Tailwind CSS 缩放 Tailwind CSS 旋转 Tailwind CSS 平移 Tailwind CSS 倾斜 Tailwind CSS 变换原点

Tailwind CSS 交互性

Tailwind CSS 强调色 Tailwind CSS 外观 Tailwind CSS 光标 Tailwind CSS 插入符号颜色 Tailwind CSS 指针事件 Tailwind CSS 调整大小 Tailwind CSS 滚动行为 Tailwind CSS 滚动边距 Tailwind CSS 滚动内边距 Tailwind CSS 滚动捕捉对齐 Tailwind CSS 滚动捕捉停止 Tailwind CSS 滚动捕捉类型 Tailwind CSS 触摸操作 Tailwind CSS 用户选择 Tailwind CSS 即将变更

Tailwind CSS SVG

Tailwind CSS 填充 Tailwind CSS 描边 Tailwind CSS 描边宽度

Tailwind CSS 可访问性

Tailwind CSS 屏幕阅读器 Tailwind CSS 强制颜色调整

Tailwind CSS 额外内容

Tailwind CSS 与预处理器配合使用 Tailwind CSS 生产环境优化

Tailwind CSS 参考

Tailwind CSS 核心概念 Tailwind CSS 自定义 Tailwind CSS 布局 Tailwind CSS 弹性框和网格 Tailwind CSS 间距 Tailwind CSS 大小 Tailwind CSS 排版 Tailwind CSS 背景 Tailwind CSS 边框 Tailwind CSS 效果 Tailwind CSS 滤镜 Tailwind CSS 表格 Tailwind CSS 过渡和动画 Tailwind CSS 变换 Tailwind CSS 交互性

Tailwind CSS 资源

Tailwind CSS 讨论 Tailwind CSS 实用资源

❮ ❯

Tailwind CSS - Text Color

Tailwind CSS Text Color 由预定义类组成，允许我们快速为网页上的文本应用不同的颜色。

Tailwind CSS Text Color 类

以下是 Tailwind CSS Text Color 文本颜色类列表，其中包含用于调整网页上文本元素颜色的属性。

类 CSS 属性
text-inherit color: inherit;
text-current color: currentColor;
text-transparent color: transparent;
text-black color: rgb(0 0 0);
text-white color: rgb(255 255 255);
text-slate-50 color: rgb(248 250 252);
text-slate-100 color: rgb(241 245 249);
text-slate-200 color: rgb(226 232 240);
text-slate-300 color: rgb(203 213 225);
text-slate-400 color: rgb(148 163 184);
text-slate-500 color: rgb(100 116 139);
text-slate-600 color: rgb(71 85 105);
text-slate-700 color: rgb(51 65 85);
text-slate-800 color: rgb(30 41 59);
text-slate-900 color: rgb(15 23 42);
text-slate-950 color: rgb(2 6 23);
text-gray-50 color: rgb(249 250 251);
text-gray-100 color: rgb(243 244 246);
text-gray-200 color: rgb(229 231 235);
text-gray-300 color: rgb(209 213 219);
text-gray-400 color: rgb(156 163 175);
text-gray-500 color: rgb(107 114 128);
text-gray-600 color: rgb(75 85 99);
text-gray-700 color: rgb(55 65 81);
text-gray-800 color: rgb(31 41 55);
text-gray-900 color: rgb(17 24 39);
text-gray-950 color: rgb(3 7 18);
text-zinc-50 color: rgb(250 250 250);
text-zinc-100 color: rgb(244 244 245);
text-zinc-200 color: rgb(228 228 231);
text-zinc-300 color: rgb(212 212 216);
text-zinc-400 color: rgb(161 161 170);
text-zinc-500 color: rgb(113 113 122);
text-zinc-600 color: rgb(82 82 91);
text-zinc-700 color: rgb(63 63 70);
text-zinc-800 color: rgb(39 39 42);
text-zinc-900 color: rgb(24 24 27);
text-zinc-950 color: rgb(9 9 11);
text-neutral-50 color: rgb(250 250 250);
text-neutral-100 color: rgb(245 245 245);
text-neutral-200 color: rgb(229 229 229);
text-neutral-300 color: rgb(212 212 212);
text-neutral-400 color: rgb(163 163 163);
text-neutral-500 color: rgb(115 115 115);
text-neutral-600 color: rgb(82 82 82);
text-neutral-700 color: rgb(64 64 64);
text-neutral-800 color: rgb(38 38 38);
text-neutral-900 color: rgb(23 23 23);
text-neutral-950 color: rgb(10 10 10);
text-stone-50: rgb(250, 250, 249)
text-stone-100: rgb(245, 245, 244)
text-stone-200: rgb(231, 229, 228)
text-stone-300: rgb(214, 211, 209)
text-stone-400: rgb(168, 162, 158)
text-stone-500: rgb(120, 113, 108)
text-stone-600: rgb(87, 83, 78)
text-stone-700: rgb(68, 64, 60)
text-stone-800: rgb(41, 37, 36)
text-stone-900: rgb(28, 25, 23)
text-stone-950: rgb(12, 10, 9)
text-red-50 color: rgb(254 242 242);
text-red-100 color: rgb(254 226 226);
text-red-200 color: rgb(254 202 202);
text-red-300 color: rgb(252 165 165);
text-red-400 color: rgb(248 113 113);
text-red-500 color: rgb(239 68 68);
text-red-600 color: rgb(220 38 38);
text-red-700 color: rgb(185 28 28);
text-red-800 color: rgb(153 27 27);
text-red-900 color: rgb(127 29 29);
text-red-950 color: rgb(69 10 10);
text-orange-50 color: rgb(255 247 237);
text-orange-100 color: rgb(255 237 213);
text-orange-200 color: rgb(254 215 170);
text-orange-300 color: rgb(253 186 116);
text-orange-400 color: rgb(251 146 60);
text-orange-500 color: rgb(249 115 22);
text-orange-600 color: rgb(234 88 12);
text-orange-700 color: rgb(194 65 12);
text-orange-800 color: rgb(154 52 18);
text-orange-900 color: rgb(124 45 18);
text-orange-950 color: rgb(67 20 7);
text-amber-50 color: rgb(255 251 235);
text-amber-100 color: rgb(254 243 199);
text-amber-200 color: rgb(253 230 138);
text-amber-300 color: rgb(252 211 77);
text-amber-400 color: rgb(251 191 36);
text-amber-500 color: rgb(245 158 11);
text-amber-600 color: rgb(217 119 6);
text-amber-700 color: rgb(180 83 9);
text-amber-800 color: rgb(146 64 14);
text-amber-900 color: rgb(120 53 15);
text-amber-950 color: rgb(69 26 3);
text-yellow-50 color: rgb(254 252 232);
text-yellow-100 color: rgb(254 249 195);
text-yellow-200 color: rgb(254 240 138);
text-yellow-300 color: rgb(253 224 71);
text-yellow-400 color: rgb(250 204 21);
text-yellow-500 color: rgb(234 179 8);
text-yellow-600 color: rgb(202 138 4);
text-yellow-700 color: rgb(161 98 7);
text-yellow-800 color: rgb(133 77 14);
text-yellow-900 color: rgb(113 63 18);
text-yellow-950 color: rgb(66 32 6);
text-lime-50 color: rgb(247 254 231);
text-lime-100 color: rgb(236 252 203);
text-lime-200 color: rgb(217 249 157);
text-lime-300 color: rgb(190 242 100);
text-lime-400 color: rgb(163 230 53);
text-lime-500 color: rgb(132 204 22);
text-lime-600 color: rgb(101 163 13);
text-lime-700 color: rgb(77 124 15);
text-lime-800 color: rgb(63 98 18);
text-lime-900 color: rgb(54 83 20);
text-lime-950 color: rgb(26 46 5);
text-green-50 color: rgb(240 253 244);
text-green-100 color: rgb(220 252 231);
text-green-200 color: rgb(187 247 208);
text-green-300 color: rgb(134 239 172);
text-green-400 color: rgb(74 222 128);
text-green-500 color: rgb(34 197 94);
text-green-600 color: rgb(22 163 74);
text-green-700 color: rgb(21 128 61);
text-green-800 color: rgb(22 101 52);
text-green-900 color: rgb(20 83 45);
text-green-950 color: rgb(5 46 22);
text-emerald-50 color: rgb(236 253 245);
text-emerald-100 color: rgb(209 250 229);
text-emerald-200 color: rgb(167 243 208);
text-emerald-300 color: rgb(110 231 183);
text-emerald-400 color: rgb(52 211 153);
text-emerald-500 color: rgb(16 185 129);
text-emerald-600 color: rgb(5 150 105);
text-emerald-700 color: rgb(4 120 87);
text-emerald-800 color: rgb(6 95 70);
text-emerald-900 color: rgb(6 78 59);
text-emerald-950 color: rgb(2 44 34);
text-teal-50 color: rgb(240 253 250);
text-teal-100 color: rgb(204 251 241);
text-teal-200 color: rgb(153 246 228);
text-teal-300 color: rgb(94 234 212);
text-teal-400 color: rgb(45 212 191);
text-teal-500 color: rgb(20 184 166);
text-teal-600 color: rgb(13 148 136);
text-teal-700 color: rgb(15 118 110);
text-teal-800 color: rgb(17 94 89);
text-teal-900 color: rgb(19 78 74);
text-teal-950 color: rgb(4 47 46);
text-cyan-50 color: rgb(236 254 255);
text-cyan-100 color: rgb(207 250 254);
text-cyan-200 color: rgb(165 243 252);
text-cyan-300 color: rgb(103 232 249);
text-cyan-400 color: rgb(34 211 238);
text-cyan-500 color: rgb(6 182 212);
text-cyan-600 color: rgb(8 145 178);
text-cyan-700 color: rgb(14 116 144);
text-cyan-800 color: rgb(21 94 117);
text-cyan-900 color: rgb(22 78 99);
text-cyan-950 color: rgb(8 51 68);
text-sky-50 color: rgb(240 249 255);
text-sky-100 color: rgb(224 242 254);
text-sky-200 color: rgb(186 230 253);
text-sky-300 color: rgb(125 211 252);
text-sky-400 color: rgb(56 189 248);
text-sky-500 color: rgb(14 165 233);
text-sky-600 color: rgb(2 132 199);
text-sky-700 color: rgb(3 105 161);
text-sky-800 color: rgb(7 89 133);
text-sky-900 color: rgb(12 74 110);
text-sky-950 color: rgb(8 47 73);
text-indigo-50 color: rgb(238 242 255);
text-indigo-100 color: rgb(224 231 255);
text-indigo-200 color: rgb(199 210 254);
text-indigo-300 color: rgb(165 180 252);
text-indigo-400 color: rgb(129 140 248);
text-indigo-500 color: rgb(99 102 241);
text-indigo-600 color: rgb(79 70 229);
text-indigo-700 color: rgb(67 56 202);
text-indigo-800 color: rgb(55 48 163);
text-indigo-900 color: rgb(49 46 129);
text-indigo-950 color: rgb(30 27 75);
text-blue-50 color: rgb(239 246 255);
text-blue-100 color: rgb(219 234 254);
text-blue-200 color: rgb(191 219 254);
text-blue-300 color: rgb(147 197 253);
text-blue-400 color: rgb(96 165 250);
text-blue-500 color: rgb(59 130 246);
text-blue-600 color: rgb(37 99 235);
text-blue-700 color: rgb(29 78 216);
text-blue-800 color: rgb(30 64 175);
text-blue-900 color: rgb(30 58 138);
text-blue-950 color: rgb(23 37 84);
text-indigo-50 color: rgb(238 242 255);
text-indigo-100 color: rgb(224 231 255);
text-indigo-200 color: rgb(199 210 254);
text-indigo-300 color: rgb(165 180 252);
text-indigo-400 color: rgb(129 140 248);
text-indigo-500 color: rgb(99 102 241);
text-indigo-600 color: rgb(79 70 229);
text-indigo-700 color: rgb(67 56 202);
text-indigo-800 color: rgb(55 48 163);
text-indigo-900 color: rgb(49 46 129);
text-indigo-950 color: rgb(30 27 75);
text-violet-50 color: rgb(245 243 255);
text-violet-100 color: rgb(237 233 254);
text-violet-200 color: rgb(221 214 254);
text-violet-300 color: rgb(196 181 253);
text-violet-400 color: rgb(167 139 250);
text-violet-500 color: rgb(139 92 246);
text-violet-600 color: rgb(124 58 237);
text-violet-700 color: rgb(109 40 217);
text-violet-800 color: rgb(91 33 182);
text-violet-900 color: rgb(76 29 149);
text-violet-950 color: rgb(46 16 101);
text-purple-50 color: rgb(250 245 255);
text-purple-100 color: rgb(243 232 255);
text-purple-200 color: rgb(233 213 255);
text-purple-300 color: rgb(216 180 254);
text-purple-400 color: rgb(192 132 252);
text-purple-500 color: rgb(168 85 247);
text-purple-600 color: rgb(147 51 234);
text-purple-700 color: rgb(126 34 206);
text-purple-800 color: rgb(107 33 168);
text-purple-900 color: rgb(88 28 135);
text-purple-950 color: rgb(59 7 100);
text-fuchsia-50 color: rgb(253 244 255);
text-fuchsia-100 color: rgb(250 232 255);
text-fuchsia-200 color: rgb(245 208 254);
text-fuchsia-300 color: rgb(240 171 252);
text-fuchsia-400 color: rgb(232 121 249);
text-fuchsia-500 color: rgb(217 70 239);
text-fuchsia-600 color: rgb(192 38 211);
text-fuchsia-700 color: rgb(162 28 175);
text-fuchsia-800 color: rgb(134 25 143);
text-fuchsia-900 color: rgb(112 26 117);
text-fuchsia-950 color: rgb(74 4 78);
text-pink-50 color: rgb(253 242 248);
text-pink-100 color: rgb(252 231 243);
text-pink-200 color: rgb(251 207 232);
text-pink-300 color: rgb(249 168 212);
text-pink-400 color: rgb(244 114 182);
text-pink-500 color: rgb(236 72 153);
text-pink-600 color: rgb(219 39 119);
text-pink-700 color: rgb(190 24 93);
text-pink-800 color: rgb(157 23 77);
text-pink-900 color: rgb(131 24 67);
text-pink-950 color: rgb(80 7 36);
text-rose-50 color: rgb(255 241 242);
text-rose-100 color: rgb(255 228 230);
text-rose-200 color: rgb(254 205 211);
text-rose-300 color: rgb(253 164 175);
text-rose-400 color: rgb(251 113 133);
text-rose-500 color: rgb(244 63 94);
text-rose-600 color: rgb(225 29 72);
text-rose-700 color: rgb(190 18 60);
text-rose-800 color: rgb(159 18 57);
text-rose-900 color: rgb(136 19 55);
text-rose-950 color: rgb(76 5 25);

Tailwind CSS 文本颜色类的功能

  • text-inherit 此类将文本颜色设置为从其父元素继承。
  • text-current 此类将文本颜色设置为元素的当前颜色。
  • text-transparent 此类使文本颜色透明。
  • text-black 此类将文本颜色设置为黑色。
  • text-white 此类将文本颜色设置为白色。
  • text-slate-* 将文本颜色设置为各种深浅不一的石板色。
  • text-gray-* 将文本颜色设置为各种深浅不一的灰色。
  • text-zinc-* 设置文本颜色设置为各种深浅不一的锌色调。
  • text-neutral-*: 将文本颜色设置为各种深浅不一的中性色调。
  • text-stone-*: 将文本颜色设置为各种深浅不一的石灰色。
  • text-red-*: 将文本颜色设置为各种深浅不一的红色。
  • text-orange-*: 将文本颜色设置为各种深浅不一的橙色。
  • text-amber-*: 将文本颜色设置为各种深浅不一的琥珀色。
  • text-yellow-*: 将文本颜色设置为各种深浅不一的黄色。
  • text-lime-*: 将文本颜色设置为各种深浅不一的黄绿色。
  • text-green-*: 将文本颜色设置为各种深浅的绿色。
  • text-emerald-*: 将文本颜色设置为各种深浅的翠绿色。
  • text-teal-*: 将文本颜色设置为各种深浅的青绿色。
  • text-cyan-*: 将文本颜色设置为各种深浅的青色。
  • text-sky-*: 将文本颜色设置为各种深浅的天空色。
  • text-blue-*: 将文本颜色设置为各种深浅的蓝色。
  • text-indigo-*: 将文本颜色设置为各种深浅的靛蓝色。
  • text-violet-*: 将文本颜色设置为各种紫色色调。
  • text-purple-*: 将文本颜色设置为各种深浅的紫色。
  • text-fuchsia-*: 将文本颜色设置为各种深浅的紫红色。
  • text-pink-*: 将文本颜色设置为各种深浅的粉红色。
  • text-rose-*: 将文本颜色设置为各种深浅的玫瑰色。

注意: 在"text-color-*"中，"*"可以替换为 50 到 950 之间的值，其中 50 代表最浅的色调，950 代表最深的色调。

Tailwind CSS 文本颜色类示例

以下是Tailwind CSS 文本颜色类展示了如何使用不同的颜色设置文本样式，让您可以自定义网页中文本元素的外观。

使用 Tailwind CSS 应用文本颜色类

Tailwind CSS 的 text-* 实用类可以轻松自定义文本颜色。每个类都包含一个颜色标识符("红色"、"蓝色"等)和一个数值("300"、"400"、"500")，分别表示从最浅到最深的阴影强度。

此示例展示了这些类如何通过对段落中的文本元素应用不同的颜色来改善外观。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Color
    </h2>
    <p class="text-red-600">
        You can change my color using text-* classes.
    </p>
    <p class="text-blue-600">
        You can change my color using text-* classes.
    </p>
    <p class="text-green-600">
        You can change my color using text-* classes.
    </p>
    <p class="text-yellow-600">
        You can change my color using text-* classes.
    </p>
    <p class="text-cyan-600">
        You can change my color using text-* classes.
    </p>
</body>

</html>

应用不同深浅的文本颜色

此示例使用 Tailwind CSS 实用程序类来应用文本颜色并调整段落元素的不透明度。它展示了如何为具有相同颜色的段落指定颜色并更改不透明度级别。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Color
    </h2>
    <p class="underline font-semibold mb-4">
        Applying different Color Shaded of a Single Color
    </p> 
    <p class = "text-cyan-800">
       Adjust opacity and color with text-* classes.
    </p>
    <p class = "text-cyan-600">
       Adjust opacity and color with text-* classes.
    </p>
    <p class = "text-cyan-500">
        Adjust opacity and color with text-* classes.
    </p>
    <p class = "text-cyan-300">
        Adjust opacity and color with text-* classes.
    </p>
    <p class = "text-cyan-200">
        Adjust opacity and color with text-* classes.
    </p>
</body>

</html>

在文本颜色上应用悬停效果

此示例展示了如何将 Tailwind CSS 文本颜色类应用于段落元素，使用户能够在悬停时看到文本颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
       Tailwind CSS Text Color 
    </h2>
     <p class="text-xl hover:text-purple-600 text-red-800">
        Hover me to see my color.
    </p>
</body>

</html>
❮ ❯