text decoration thickness

Utilities for controlling the thickness of text decorations.

2025-04-12

Written by: tdtc

Class	Styles
`decoration-<number>`	`text-decoration-thickness: <number>px;`
decoration-from-font	text-decoration-thickness: from-font;
decoration-auto	text-decoration-thickness: auto;
`decoration-(<custom-property>)`	`text-decoration-thickness: var(<custom-property>);`
`decoration-[<value>]`	`text-decoration-thickness: <value>;`

Basic example

Use decoration- utilities like decoration-2 and decoration-4 to change the text decoration thickness of an element:

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

Using a custom value

Use the decoration-[] syntax to set the text decoration thickness based on a completely custom value:

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

Ref