1. 排版
  2. text-decoration-color

排版

text-decoration-color

用于控制文本装饰颜色的实用程序。

样式
decoration-inherit
text-decoration-color: inherit;
decoration-current
text-decoration-color: currentColor;
decoration-transparent
text-decoration-color: transparent;
decoration-black
text-decoration-color: var(--color-black); /* #000 */
decoration-white
text-decoration-color: var(--color-white); /* #fff */
decoration-red-50
text-decoration-color: var(--color-red-50); /* oklch(0.971 0.013 17.38) */
decoration-red-100
text-decoration-color: var(--color-red-100); /* oklch(0.936 0.032 17.717) */
decoration-red-200
text-decoration-color: var(--color-red-200); /* oklch(0.885 0.062 18.334) */
decoration-red-300
text-decoration-color: var(--color-red-300); /* oklch(0.808 0.114 19.571) */
decoration-red-400
text-decoration-color: var(--color-red-400); /* oklch(0.704 0.191 22.216) */

示例

基本示例

使用类似 decoration-sky-500decoration-pink-500 的工具类来更改元素的文本装饰颜色

我是德里克,一位在塔图因的宇航工程师。我喜欢在 我的公司,股份有限公司。工作之余,我喜欢 看飞梭赛 和进行 光剑 战斗。

<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>

更改不透明度

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

我是德里克,一位在塔图因的宇航工程师。我喜欢在 我的公司,股份有限公司。工作之余,我喜欢 看飞梭赛 和进行 光剑 战斗。

<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>

使用自定义值

使用 decoration-[<value>] 语法 来设置文本装饰颜色基于完全自定义的值

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

对于 CSS 变量,您还可以使用 decoration-(<custom-property>) 语法

<p class="decoration-(--my-color) ...">  <!-- ... --></p>

这只是 decoration-[var(<custom-property>)] 的简写形式,它会自动为您添加 var() 函数。

悬停时应用

使用诸如hover:* 的变体前缀 text-decoration-color 工具类,使其仅在该状态下应用 hover:*

将鼠标悬停在文本上以查看预期行为

敏捷的 棕色狐狸 跳过懒狗。
<p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>

变体文档中了解有关使用变体的更多信息。

响应式设计

使用诸如hover:* 的变体前缀 text-decoration-color 工具类 使用类似 md: 的断点变体,使其仅在中等 屏幕尺寸及以上应用

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

变体文档中了解有关使用变体的更多信息。

自定义您的主题

使用 --color-* 主题变量自定义项目中的颜色 工具类

@theme {  --color-regal-blue: #243c5a; }

现在, decoration-regal-blue 工具类可以在您的标记中使用

<p class="decoration-regal-blue">  <!-- ... --></p>

主题文档中了解有关自定义主题的更多信息 主题文档.

Copyright © 2025 Tailwind Labs Inc.·商标政策