Tailwind 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