Text Decoration Thickness

Controls the thickness of text decorations.

Class	Properties
tdt-auto	text-decoration-thickness: auto;
tdt-ff	text-decoration-thickness: from-font;
tdt-0	text-decoration-thickness: 0px;
tdt-1	text-decoration-thickness: 4px;
tdt-2	text-decoration-thickness: 8px;
tdt-3	text-decoration-thickness: 12px;
tdt-4	text-decoration-thickness: 16px;

---

Using breakpoints

The utilization of breakpoint modifiers, like sm:tdt-*, md:tdt-*, lg:tdt-*, and xxl:tdt-* enables the targeting of specific utilities in disparate viewports.

<p class="tdt-1 md:tdt-2 ...">Text Decoration Thickness</p>

Using variants

The :hover variant, such as h:tdt-*, allows you to modify text decoration thickness when hovering over elements.

<p class="tdt-1 h:tdt-2 ...">Text Decoration Thickness</p>