Tailwind CSS - 文本装饰粗细

Tailwind CSS 现代指南：文本装饰粗细

Tailwind 的 decoration-{width} 工具类允许你控制文本装饰（如下划线、上划线和删除线）的粗细。这让你可以对排版设计进行精细控制。

核心装饰粗细工具类

这些类与 underline 和 decoration-sky-500 等其他装饰工具类结合使用，以产生最终效果。

类	CSS 属性	描述
`decoration-auto`	`text-decoration-thickness: auto;`	浏览器默认粗细。
`decoration-from-font`	`text-decoration-thickness: from-font;`	粗细基于字体文件建议值。非常适合排版一致性。
`decoration-0`	`text-decoration-thickness: 0px;`	粗细为零。
`decoration-1`	`text-decoration-thickness: 1px;`	一条细 1px 线。
`decoration-2`	`text-decoration-thickness: 2px;`	一条 2px 线。
`decoration-4`	`text-decoration-thickness: 4px;`	一条粗 4px 线。
`decoration-8`	`text-decoration-thickness: 8px;`	一条超粗 8px 线。

实际应用：链接样式设计

让我们创建一个时尚的链接，在鼠标悬停时改变其装饰的粗细和颜色，这是现代网页设计中常见的模式。

示例：交互式链接样式

<div class="font-sans p-8 bg-slate-100 text-slate-800">
  <h3 class="text-2xl font-bold mb-4">Article Excerpt</h3>
  <div class="prose lg:prose-xl">
    <p>
      Tailwind CSS is a utility-first framework that provides low-level utility classes to build custom designs without writing any custom CSS. To learn more, you can
      <a href="#" class="underline decoration-sky-500 decoration-2 hover:decoration-4 transition-all">
        visit the official documentation
      </a>.
      It's a great way to get started and understand the core concepts. You can also explore how to
      <a href="#" class="line-through decoration-pink-500 decoration-1">
        deprecate old styles
      </a>
      and embrace new ones.
    </p>
  </div>
</div>

解释：

underline：应用下划线装饰。
decoration-sky-500：设置下划线的颜色。
decoration-2：将初始粗细设置为 2px。
hover:decoration-4：在鼠标悬停时，将粗细增加到 4px。
transition-all：平滑地动画化粗细的变化。

自定义粗细值

如果默认粗细值不够用，你可以轻松地在 tailwind.config.js 文件中添加自定义值。

module.exports = {
  theme: {
    extend: {
      textDecorationThickness: {
        '3': '3px',
        '6': '6px',
      }
    }
  }
}

此更改后，你现在可以在 HTML 中使用 decoration-3 和 decoration-6 等类。

可访问性和最佳实践

对比度是关键：确保装饰颜色与背景有足够的对比度，特别是对于传达意义的下划线（如链接）。
组合使用工具类：装饰粗细很少单独使用。将其与 decoration-color、decoration-style（decoration-dotted、decoration-wavy）以及 text-underline-offset 结合使用，以实现完全控制。
微妙更佳：对于大多数 UI 设计，微妙的 decoration-1 或 decoration-2 就足够了。像 decoration-8 这样较粗的样式应谨慎使用，仅用于风格上的强调。