25. 文本样式与颜色

本节目标：掌握文本装饰、对齐、大小写转换等样式控制，学会用 Tailwind 的颜色系统设置文字颜色，能组合出完整的文字视觉效果。

text-align：文本对齐

控制文本在水平方向上的对齐方式：

类名	效果
`text-left`	左对齐
`text-center`	居中
`text-right`	右对齐
`text-justify`	两端对齐
`text-start`	逻辑起始位置（LTR 下等同 left）
`text-end`	逻辑结束位置（LTR 下等同 right）

<h1 class="text-center">居中标题</h1>
<p class="text-justify">两端对齐的正文段落...</p>
<p class="text-right">右对齐的文字</p>

Tip

长段落正文一般用左对齐（或 start），不要两端对齐。两端对齐在中文排版中容易造成字间距不均匀，影响阅读体验。

vertical-align：垂直对齐

控制行内元素或表格单元格在垂直方向上的对齐：

类名	效果
`align-baseline`	基线对齐（默认）
`align-top`	顶部对齐
`align-middle`	中部对齐
`align-bottom`	底部对齐
`align-text-top`	文字顶部对齐
`align-text-bottom`	文字底部对齐
`align-sub`	下标对齐
`align-super`	上标对齐

<!-- 图标和文字对齐 -->
<p>
  <span class="align-middle text-2xl">★</span>
  <span class="align-middle">和图标对齐的文字</span>
</p>

Note

vertical-align 只对 inline、inline-block 和 table-cell 元素生效。对块级元素（如 div）无效。

text-decoration：文本装饰

装饰线类型

类名	效果
`underline`	下划线
`overline`	上划线
`line-through`	删除线
`no-underline`	无装饰

<a class="underline">链接样式</a>
<p class="line-through text-gray-400">¥199</p>
<p class="text-2xl">现价 ¥99</p>

装饰线样式（v4 新增）

v4 支持更多装饰线样式：

类名	效果
`decoration-solid`	实线（默认）
`decoration-double`	双线
`decoration-dotted`	点线
`decoration-dashed`	虚线
`decoration-wavy`	波浪线

<p class="underline decoration-wavy decoration-red-500">波浪线下划线</p>

装饰线颜色和粗细

<!-- 红色、2px 粗的下划线 -->
<p class="underline decoration-red-500 decoration-2">
  红色粗下划线
</p>

<!-- 偏移距离 -->
<p class="underline underline-offset-4">
  下划线离文字远一点
</p>

text-transform：文本转换

不修改 HTML 内容，纯视觉上改变文字大小写：

类名	效果
`uppercase`	全部大写
`lowercase`	全部小写
`capitalize`	每个单词首字母大写
`normal-case`	不转换（默认）

<h2 class="uppercase tracking-wide text-sm">小标题</h2>
<p class="capitalize">hello world 变成 Hello World</p>

Warning

uppercase 只改变视觉呈现，复制粘贴时仍然是原始文本。另外，屏幕阅读器可能逐字母朗读大写内容，影响可访问性。谨慎使用。

font-style：字体样式

类名	效果
`italic`	斜体
`not-italic`	正常（取消斜体）

<p class="italic">这段文字是斜体的</p>
<em class="not-italic">em 标签默认斜体，这里取消</em>

text-color：文字颜色

Tailwind 的文字颜色用 text-{color}-{shade} 命名：

<p class="text-blue-500">蓝色文字</p>
<p class="text-red-600">红色文字</p>
<p class="text-gray-900">深灰文字</p>
<p class="text-emerald-500">翠绿色文字</p>

特殊颜色值

类名	效果
`text-transparent`	透明文字
`text-current`	继承当前元素的 color 值
`text-black`	纯黑
`text-white`	纯白

颜色透明度

v4 推荐用 / 语法控制透明度：

<p class="text-blue-500/75">75% 不透明度的蓝色</p>
<p class="text-gray-900/50">50% 不透明度的深灰</p>

Note

v3 中用 text-opacity-{value} 控制透明度，如 text-blue-500 text-opacity-50。v4 推荐直接用 / 语法，更简洁。

font-variant-numeric：数字变体

控制数字的显示方式，对表格数据、价格显示很有用：

类名	效果
`normal-nums`	默认数字
`ordinal`	序数词（1st、2nd）
`slashed-zero`	带斜线的 0（区分 O 和 0）
`lining-nums`	等高数字
`oldstyle-nums`	变高数字
`proportional-nums`	比例宽度数字
`tabular-nums`	等宽数字（对齐用）
`diagonal-fractions`	对角线分数
`stacked-fractions`	堆叠分数

<!-- 表格中的数字对齐 -->
<td class="tabular-nums">1,234.56</td>
<td class="tabular-nums">78.90</td>

tabular-nums 是表格数字对齐的神器——所有数字字符宽度相同，小数点自然对齐。

实际应用：价格展示

<div class="flex items-baseline gap-2">
  <span class="text-3xl font-bold text-red-600">¥99</span>
  <span class="text-sm text-gray-400 line-through">¥199</span>
  <span class="text-xs bg-red-100 text-red-600 px-1.5 py-0.5 rounded">
    立减50%
  </span>
</div>

实际应用：标签样式

<span class="inline-block text-xs font-semibold uppercase tracking-wider 
             text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
  新品
</span>

uppercase tracking-wider → 大写加宽字间距，标签感
text-xs font-semibold → 小字号但加粗
bg-blue-100 text-blue-600 → 浅底深字，对比度够

本节小结

text-left / text-center / text-right → 水平对齐
align-* → 垂直对齐（行内元素）
underline / line-through / decoration-* → 文本装饰
uppercase / capitalize → 大小写转换
text-{color}-{shade} → 文字颜色
text-{color}/{opacity} → 颜色透明度（v4 语法）
tabular-nums → 等宽数字对齐