Tailwind CSS Text Decoration Style

The text-decoration-style utility class in Tailwind CSS allows you to control the style of text decorations such as underline, overline, and line-through. With Tailwind's text-decoration-style class, you can easily adjust the style of these text decorations.

Applying Text Decoration Style

To apply text decoration style to an element, you can use the text-decoration-style-{value} utility class, where {value} represents the desired style. Here are the available style options:

• text-decoration-style-solid: Applies a solid line style to the text decoration (default).
• text-decoration-style-double: Applies a double line style to the text decoration.
• text-decoration-style-dotted: Applies a dotted line style to the text decoration.
• text-decoration-style-dashed: Applies a dashed line style to the text decoration.
• text-decoration-style-wavy: Applies a wavy line style to the text decoration.

<p class="underline decoration-solid">
  This is an underlined text with a solid line style.
</p>
<p class="underline decoration-dotted">
  This is an underlined text with a dotted line style.
</p>
<p class="underline decoration-dashed">
  This is an underlined text with a dashed line style.
</p>
<p class="underline decoration-double">
  This is an underlined text with a double line style.
</p>

Preview

In the above example, a <p> element is styled with the text-decoration-style-dotted class, which applies a dotted line style to the underline text decoration.

Responsive Text Decoration Style

Tailwind CSS allows you to apply text decoration style classes responsively at different breakpoints. To use responsive text decoration style classes, you can append the breakpoint prefix to the utility class. For example, md:text-decoration-style-double applies a double line style to the text decoration starting from the medium breakpoint and above.

<p class="text-decoration-style-dotted md:text-decoration-style-double text-underline">
  This text has a dotted underline by default, but the style changes to double on medium screens and
  above.
</p>

In the above example, the text has a dotted underline by default (text-decoration-style-dotted), but starting from the medium breakpoint and above, the style changes to double (md:text-decoration-style-double).

Tailwind Text Decoration Class Table

Windframe Tailwind blocks

Landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.