Tailwind CSS Text Decoration Color

The text-decoration-color property sets the color of the text-decoration (underlines, overlines, linethroughs) of an element.

Syntax

/* Set the text decoration color */
text-decoration-color: color;

Example

<p class="text-red-500 underline underline-thickness-2 underline-offset-2 hover:text-green-500 hover:line-through">
  This is an example text
</p>

Output

The above example will show the text "This is an example text" with a red underline of 2 pixels thickness and with an offset of 2 pixels from the baseline. On hover, the text will turn green and a line-through will be applied.

Explanation

The text-decoration-color property sets the color of the line that appears on the text. It is usually applied in combination with the text-decoration-style property (which sets the style of the line) and the text-decoration-line property (which sets which lines appear on the text). By default, the color of the line is the same as the color of the text.

In the above example, the text-decoration-color property is set to red-500, which is a predefined color in Tailwind CSS. The underline and underline-thickness-2 classes are used to set the line style and thickness, respectively. The underline-offset-2 class is used to set an offset of 2 pixels from the baseline of the text. The hover:text-green-500 class is used to set the text color to green on hover, and the hover:line-through class is used to apply a line-through on hover.

Use

The text-decoration-color property can be used to set the color of underlines, overlines, and line-throughs. It is useful when you want to highlight text or add a visual element to it. In combination with other text decoration properties, it can help you create interesting and visually appealing designs.

Important Points

• The text-decoration-color property only affects the color of the line that appears on the text.
• The default value of the text-decoration-color property is the color of the text.
• The text-decoration-color property can be used in combination with other text decoration properties to create interesting designs.

Summary

In summary, the text-decoration-color property sets the color of the text decoration (underlines, overlines, linethroughs) of an element. It is used in combination with other text decoration properties to create interesting designs. The default value of the property is the color of the text.