排版
控制文本装饰厚度的工具类。
| Class | Styles |
|---|---|
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-<number> 工具类，如 decoration-2 和 decoration-4，可以改变元素的 文本装饰 厚度：
快速的棕色狐狸跳过懒狗。
快速的棕色狐狸跳过懒狗。
快速的棕色狐狸跳过懒狗。
<p class="underline decoration-1">快速的棕色狐狸...</p><p class="underline decoration-2">快速的棕色狐狸...</p><p class="underline decoration-4">快速的棕色狐狸...</p>Use the decoration-[<value>] syntax to set the 文本装饰厚度 based on a completely custom value:
<p class="decoration-[0.25rem] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the decoration-(length:<custom-property>) syntax:
<p class="decoration-(length:--my-decoration-thickness) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for decoration-[length:var(<custom-property>)] that adds the var() function for you automatically.
Prefix a text-decoration-thickness utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="underline md:decoration-4 ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.