文本装饰颜色

​基础用法

​设置文本装饰颜色

使用 decoration-* 实用程序来更改元素 text decoration 的颜色。

<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a class="underline decoration-sky-500">My Company, Inc</a>.
    Outside of work, I like to <a class="underline decoration-pink-500">watch
    pod-racing</a> and have <a class="underline decoration-indigo-500">light-saber</a> fights.
  </p>
</div>

​更改不透明度

使用颜色不透明度修饰符来控制元素文本装饰颜色的不透明度。

<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a class="underline decoration-sky-500/30">My Company, Inc</a>.
    Outside of work, I like to <a class="underline decoration-pink-500/30">watch
    pod-racing</a> and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.
  </p>
</div>

您可以使用 opacity scale 中定义的任何值，或者如果您需要偏离设计令牌，则可以使用任意值。

<strong class="underline decoration-sky-500/[.33]"></strong>

​条件应用

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:decoration-blue-400 来仅 在 hover应用 decoration-blue-400.

<p class="underline decoration-sky-600 hover:decoration-blue-400">
  <!-- ... -->
</p>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:decoration-blue-400 来应用 decoration-blue-400 程序，适用于中等屏幕尺寸及以上。

<p class="underline decoration-sky-600 md:decoration-blue-400">
  <!-- ... -->
</p>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

​使用自定义值

​定制你的主题

By default, Tailwind makes the entire default color palette available as text decoration colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your text decoration colors by editing theme.textDecorationColor or theme.extend.textDecorationColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

​任意值

如果您需要使用一次性的 text-decoration-color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

<p class="decoration-[#50d71e]">
  <!-- ... -->
</p>

进一步了解，请参考 任意值 文档.