文本修饰是网页排版的 “最后 1 毫米”。在 Tailwind CSS 中，我们可以使用相关类名给文本轻松加上修饰效果。
Tailwind CSS 文本修饰语法
在 Tailwind CSS中，我们主要使用 text-decoration 属性相关的类名来定义文本修饰效果（比如下划线、删除线等）。
其中，常用的类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| underline | text-decoration-line: underline; | 下划线 |
| line-through | text-decoration-line: line-through; | 删除线 |
| no-underline | text-decoration-line: none; | 取消装饰线 |
| decoration-2 | text-decoration-thickness: 2px; | 控制线条粗细（数字可换） |
| underline-offset-4 | text-underline-offset: 4px; | 控制线条与文字的间距 |
除了默认的实线之外，Tailwind CSS 还允许我们改变下划线的形状，常用的类名包括：
| 类名 | 说明 |
|---|---|
| decoration-dashed | 虚线 |
| decoration-dotted | 点状线 |
| decoration-double | 双实线 |
| decoration-wavy | 波浪线 |
Tailwind CSS 文本修饰示例
接下来，我们通过一个简单的例子来讲解一下如何使用 Tailwind CSS 来定义文本的修饰效果。
示例：定义下划线效果
<!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="text-xl underline">
默认下划线
</a>
<br>
<a href="#" class="text-xl font-bold text-green-600 underline decoration-green-300 decoration-2 underline-offset-8">
绿叶网风格
</a>
</body>
</html>页面效果如下图所示。
分析：
在第 2 个超链接中，我们没有使用丑陋的默认下划线，而是通过 decoration-2 加粗了线条，并用 underline-offset-8 让线条下移。
常见问题
1. 下划线 underline 和边框 border-b，我应该选哪个呢？
对于普通的文本装饰来说，我们应该优先用 underline。而对于需要特殊视觉或大间距来说，我们应该选 border-b。
underline：最语义化，线条会随着文字的大小和换行自动调整，且支持 underline-offset。border-b：灵活性更高，可以配合 padding-b 做出极其宽阔的间距。此外，下划线（underline）只能跟随文字本身的长度，而边框（border-b）可以让线条延伸占据整个容器的宽度（比如搭配 block 元素时）。
