Skip to content

Text Decoration Style

Controls the style of text decoration.

Utility Properties
Failed to load data. Please try again later.

Dashed

This example sets the text decoration style to dashed. The text will be displayed with a dashed line for its decoration.

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 tds-d">Sphinx of black quartz, judge my vow.</p>
</div>

Solid

Initial value

This example sets the text decoration style to solid. The text will be displayed with a solid line for its decoration.

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 tds-s">Sphinx of black quartz, judge my vow.</p>
</div>

Wavy

This example sets the text decoration style to wavy. The text will be displayed with a wavy line for its decoration.

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 tds-w">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.

Media modifier

You can combine responsive breakpoints like sm:tds-*,md:tds-*, lg:tds-*, and xxl:tds-* allows targeting specific utilities in different viewports.

<div class="tds-none md:tds-s ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:tds-* utility to override elements and change their values when hovering over them.

<div class="tds-none h:tds-s ..."></div>