Tailwind CSS - 文本装饰样式

除了简单的实线，Tailwind CSS 允许你使用 decoration-{style} 工具类来控制文本装饰（Text Decoration）的样式。这能让你的链接和标题等元素更具个性和视觉吸引力。

文本装饰样式类

这些类为文本装饰线（例如下划线）应用不同的视觉样式。

类	CSS 属性
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

功能与用法

decoration-solid：默认样式，一条实线。
decoration-double：双实线。非常适合正式或独特的强调。
decoration-dotted：一系列点。提供更轻盈、更微妙的装饰效果。
decoration-dashed：一系列短划线。是实线的一种风格化替代方案。
decoration-wavy：波浪线。非常适合指示拼写/语法错误，或用于俏皮、创意效果。

重要提示：这些类仅设置装饰的样式。你仍然需要应用一个装饰线类，例如 underline，它们才能显示出来。

实际示例

示例 1：不同下划线样式

此示例展示了应用于带下划线文本元素的每种装饰样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Decoration Style Example</title>
</head>
<body class="bg-slate-50 p-8">
  <div class="max-w-md mx-auto space-y-6 text-center">
    <h1 class="text-3xl font-bold text-slate-800">Text Decoration Styles</h1>

    <p class="underline decoration-solid text-xl">Solid Underline</p>
    <p class="underline decoration-double text-xl">Double Underline</p>
    <p class="underline decoration-dotted text-xl">Dotted Underline</p>
    <p class="underline decoration-dashed text-xl">Dashed Underline</p>
    <p class="underline decoration-wavy text-xl decoration-red-500">Wavy Underline (in red)</p>
  </div>
</body>
</html>

示例 2：鼠标悬停时的条件样式

装饰样式可以与 hover: 等状态修饰符结合使用，以创建引人入胜且信息丰富的交互效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Hover Decoration Styles</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-xl mx-auto bg-white p-8 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-900 mb-4">Interactive Links</h2>
    <p class="text-gray-700 text-lg leading-relaxed">
      Enhance user feedback by changing decoration styles on hover. This link starts with a
      <a href="#" class="underline decoration-dotted text-blue-600 font-semibold
                         hover:decoration-solid">
        dotted underline
      </a> and becomes solid on hover.
      This next link has a
      <a href="#" class="underline decoration-wavy decoration-2 decoration-purple-400 text-purple-700 font-semibold
                         hover:decoration-purple-600 hover:text-underline-offset-4 transition-all duration-200">
        fancy wavy style
      </a> that becomes more prominent on hover.
    </p>
  </div>
</body>
</html>

最佳实践

组合以增强效果：为了达到最佳效果，将装饰样式与颜色（decoration-red-500）、粗细（decoration-2）和偏移（text-underline-offset-4）结合使用，以创建真正自定义的下划线。这将在文本装饰章节中更详细地介绍。

保持可读性：虽然创意样式很有趣，但要确保它们不会影响可读性。decoration-wavy 样式对于长段文本来说可能过于分散注意力，但对于简短、强调的链接来说是完美的。