1. 字体排版
  2. text-decoration-thickness

字体排版

text-decoration-thickness

forced-color-adjust

用于控制文本装饰厚度的实用工具。
样式
decoration-<number>
text-decoration-thickness: <number>px;
decoration-from-font
text-decoration-thickness: from-font;
decoration-auto
text-decoration-thickness: auto;
decoration-(<自定义属性>)
text-decoration-thickness: var(<自定义属性>);
decoration-[<值>]

text-decoration-thickness: <值>;

示例

基本示例

使用 decoration-<number> 实用工具,如 decoration-2decoration-4 来更改元素的文本装饰厚度

decoration-1

敏捷的棕色狐狸跳过了懒惰的狗。

decoration-1

decoration-2

decoration-1

<p class="underline decoration-1">The quick brown fox...</p><p class="underline decoration-2">The quick brown fox...</p><p class="underline decoration-4">The quick brown fox...</p>

decoration-4

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

<p class="decoration-[0.25rem] ...">  <!-- ... --></p>

对于 CSS 变量,您还可以使用 使用-(<自定义属性>) -[<值>]

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

这只是 使用-[var(<自定义属性>)] 的简写形式,它会自动为您添加 var() 函数。

响应式设计

前缀a text-decoration-thickness 实用工具 带有断点变体,如 md:,仅在中等 屏幕尺寸及以上应用该实用工具

<p class="underline md:decoration-4 ...">  <!-- ... --></p>

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

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