text-decoration-thickness

用于控制文本装饰粗细的工具类。

快速参考

类	属性
decoration-<number>	text-decoration-thickness: <number>px;
decoration-from-font	text-decoration-thickness: from-font;
decoration-auto	text-decoration-thickness: auto;
decoration-(length:<custom-property>)	text-decoration-thickness: var(<custom-property>);
decoration-[<value>]	text-decoration-thickness: <value>;

示例

基础示例

使用 decoration-2、decoration-4 等 decoration-<number> 工具类，更改元素的文本装饰粗细：

decoration-1

The quick brown fox jumps over the lazy dog.

decoration-2

The quick brown fox jumps over the lazy dog.

decoration-4

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:decoration-1] -->
<p class="underline decoration-1">The quick brown fox...</p>
<!-- [!code classes:decoration-2] -->
<p class="underline decoration-2">The quick brown fox...</p>
<!-- [!code classes:decoration-4] -->
<p class="underline decoration-4">The quick brown fox...</p>

使用自定义值

使用 decoration-[<value>] 等工具类，根据完全自定义的值设置文本装饰粗细：

<p class="decoration-[0.25rem] ...">
 Lorem ipsum dolor sit amet...
</p>

对于 CSS 变量，也可以使用 decoration-(length:<custom-property>) 语法：

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

这只是 decoration-[length:var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 text-decoration-thickness 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<p class="underline md:decoration-4 ...">
 Lorem ipsum dolor sit amet...
</p>

更多关于变体的用法，请参阅变体文档。