Tailwind CSS - 文本装饰颜色

Tailwind CSS：文本装饰颜色

decoration-{color} 实用工具让你能够控制下划线、上划线和删除线等文本装饰的颜色。这使得你可以创建更生动、更易于访问的链接和样式化的文本。

用法和语法

只需在文本装饰实用工具（如 underline）旁边添加一个 decoration-{color}-{shade} 类，即可设置其颜色。Tailwind 的整个调色板都可用。

类名	CSS 属性	备注
decoration-blue-500	text-decoration-color: #3b82f6;	将装饰设置为特定深浅度的蓝色。
decoration-current	text-decoration-color: currentColor;	使装饰颜色与文本颜色匹配。
decoration-transparent	text-decoration-color: transparent;	使装饰不可见。
hover:decoration-red-600	…	在悬停时改变颜色。

现代装饰样式

现代 CSS 提供了对文本装饰更精细的控制，所有这些都可以通过 Tailwind 实用工具实现：

• 装饰样式：使用 decoration-solid、decoration-dashed、decoration-dotted、decoration-double 或 decoration-wavy 等类。
• 装饰粗细：使用 decoration-0、decoration-1、decoration-2 等或任意值（如 decoration-[3px]）来控制线条粗细。
• 下划线偏移：使用 underline-offset-1、underline-offset-2 等调整文本和下划线之间的距离。

实际示例

示例 1：链接样式

此示例演示了如何创建一个现代、可访问的链接，它具有微妙的默认下划线，并在悬停时变得更突出。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Decoration Color Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-slate-50 text-slate-800">

  <h2 class="text-2xl font-bold mb-6">Article Excerpt</h2>

  <p class="text-lg leading-relaxed">
    Tailwind CSS provides a comprehensive set of utilities for building modern web interfaces.
    To learn more, you should
    <a
      href="#"
      class="font-semibold text-blue-600 underline
             decoration-blue-600/30 underline-offset-4
             transition-all
             hover:decoration-blue-600/100 hover:underline-offset-2"
    >
      read the official documentation
    </a>.
    It covers everything from core concepts to advanced customization.
  </p>
</body>
</html>

示例 2：使用不透明度和任意颜色

你可以使用 / 表示法修改任何装饰颜色的不透明度。对于不在你的主题中的颜色，请使用任意值语法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Decoration</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <p class="mb-4">
    <span class="line-through text-2xl decoration-red-500/50 decoration-2">50% Opacity Strike-through</span>
  </p>
  <p>
    <span class="underline text-2xl decoration-wavy decoration-[#ff5733] decoration-2">Wavy underline with an arbitrary color</span>
  </p>
</body>
</html>

最佳实践

• 可访问性：确保你的装饰颜色与背景有足够的对比度，特别是对于链接。
• 悬停状态：始终为交互式元素在悬停和焦点时提供清晰的视觉变化。改变装饰颜色或样式是实现这一目标的好方法。
• 一致性：使用你的 tailwind.config.js 定义项目文本装饰的一致调色板，确保设计协调统一。