Text Decoration Thickness
Controls the thickness of text decorations.
Utility | Properties |
---|---|
tdt-0 | text-decoration-thickness: 0rem; |
tdt-1 | text-decoration-thickness: 1rem; |
tdt-2 | text-decoration-thickness: 2rem; |
tdt-3 | text-decoration-thickness: 3rem; |
tdt-4 | text-decoration-thickness: 4rem; |
tdt-auto | text-decoration-thickness: auto; |
tdt-ff | text-decoration-thickness: from-font; |
0
This example sets the text decoration thickness to 0px. The text will have no visible decoration thickness.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tdl-u tdt-0">Sphinx of black quartz, judge my vow.</p></div>
1
This example sets the text decoration thickness to 1px. The text will have a thin decoration line.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tdl-u tdt-1">Sphinx of black quartz, judge my vow.</p></div>
2
This example sets the text decoration thickness to 2px. The text will have a slightly thicker decoration line.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tdl-u tdt-2">Sphinx of black quartz, judge my vow.</p></div>
3
This example sets the text decoration thickness to 3px. The text will have a moderately thick decoration line.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tdl-u tdt-3">Sphinx of black quartz, judge my vow.</p></div>
4
This example sets the text decoration thickness to 4px. The text will have a thick decoration line.
Sphinx of black quartz, judge my vow.
<div class="bg-indigo-1 p-4 rad-1"> <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tdl-u tdt-4">Sphinx of black quartz, judge my vow.</p></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:tdt-*
,md:tdt-*
, lg:tdt-*
, and xxl:tdt-*
allows targeting specific utilities in different viewports.
<div class="tdt-1 md:tdt-2 ..."></div>
Alternatively, you can apply :hover
by using h:tdt-*
utility to override elements and change their values when hovering over them.
<div class="tdt-1 h:tdt-2 ..."></div>