Tailwind CSS Text Decoration Thickness

The Tailwind CSS text decoration thickness classes allow you to set the thickness of text decoration line.

To set the thickness of text decoration, you can use the following classes:

Class	Properties
underline-thin	text-decoration-thickness:from-1
underline-thick	text-decoration-thickness:from-2
underline-extra-thick	text-decoration-thickness:from-3
line-through-thin	text-decoration-thickness:from-1
line-through-thick	text-decoration-thickness:from-2
line-through-extra-thick	text-decoration-thickness:from-3

Syntax

Use the following syntax to apply the text decoration thickness classes:

<span class="underline-thick">Tailwind CSS</span>

Example

Here's an example of how to apply text decoration thickness classes in Tailwind CSS:

<!-- underline-thin example -->
<p class="underline-thin">This text has a thin underline</p>

<!-- underline-thick example -->
<p class="underline-thick">This text has a thick underline</p>

<!-- underline-extra-thick example -->
<p class="underline-extra-thick">This text has an extra-thick underline</p>

<!-- line-through-thin example -->
<p class="line-through-thin">This text has a thin line-through</p>

<!-- line-through-thick example -->
<p class="line-through-thick">This text has a thick line-through</p>

<!-- line-through-extra-thick example -->
<p class="line-through-extra-thick">This text has an extra-thick line-through</p>

Output

The output will look like this:

Explanation

The text-decoration-thickness property specifies the thickness of the line used for the decoration, such as underline or line-through. The from- variants set the starting thickness for the decoration line.

• The underline-thin class sets the text underline thickness to 1.
• The underline-thick class sets the text underline thickness to 2.
• The underline-extra-thick class sets the text underline thickness to 3.
• The line-through-thin class sets the text line-through thickness to 1.
• The line-through-thick class sets the text line-through thickness to 2.
• The line-through-extra-thick class sets the text line-through thickness to 3.

Use

You can use the Tailwind CSS text decoration thickness classes anywhere in your HTML code. For example, you can use them to set the thickness of the underline or line-through for your links, or to decorate headings or sections of your website.

Important Points

• The text decoration thickness classes only set the thickness of the line, not the color or style. You can set color and style using other Tailwind CSS classes.
• The text-decoration-thickness property is not supported in older browsers.

Summary

The Tailwind CSS text decoration thickness classes allow you to set the thickness of text decoration line. You can set the thickness of underline or line-through using underline-thin, underline-thick, underline-extra-thick, line-through-thin, line-through-thick, or line-through-extra-thick classes. The text-decoration-thickness property is used to specify the thickness of the text decoration line.