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(97.1% 0.013 17.38) */
decoration-red-100
text-decoration-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
decoration-red-200
text-decoration-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
decoration-red-300
text-decoration-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */
decoration-red-400
text-decoration-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */

示例

基本示例

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

我是德里克,一位住在塔图因的 астро-工程师。我喜欢在以下地方建造 X 翼战机: 我的公司,股份有限公司。工作之余,我喜欢 观看飞梭赛车 和进行 光剑 格斗。

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

更改不透明度

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

我是德里克,一位住在塔图因的 астро-工程师。我喜欢在以下地方建造 X 翼战机: 我的公司,股份有限公司。工作之余,我喜欢 观看飞梭赛车 和进行 光剑 格斗。

<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] ...">
Lorem ipsum dolor sit amet...
</p>

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

<p class="decoration-(--my-color) ...">
Lorem ipsum dolor sit amet...
</p>

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

应用于悬停时

前缀一个 text-decoration-color 工具类,使用类似 hover:* 这样的变体,以仅在该状态下应用该工具类

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

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

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

响应式设计

前缀一个 text-decoration-color 工具类 使用像 md: 这样的断点变体,以仅在中等 屏幕尺寸及以上应用该工具类

<p class="underline decoration-sky-600 md:decoration-blue-400 ...">
Lorem ipsum dolor sit amet...
</p>

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

自定义您的主题

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

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

现在 regal-blue decoration-工具类可以在您的标记中使用 utility can be used in your markup

<p class="decoration-regal-blue">
Lorem ipsum dolor sit amet...
</p>

theme documentation

中了解更多关于自定义主题的信息 theme documentation.

版权所有 © 2025 Tailwind Labs Inc.·商标政策