Text decoration and underline in Tailwind - Browser Rendering Trace

Render Flow - Text decoration and underline

Read HTML element with text

↓

Parse Tailwind classes

↓

Match text-decoration classes

↓

Apply CSS text-decoration properties

↓

Render underline or other decoration

↓

Paint text with decoration

↓

Composite final output

The browser reads the HTML text element, parses Tailwind classes that control text decoration, applies the corresponding CSS properties like underline, then paints and composites the text with the decoration visible.

Render Steps - 4 Steps

Code Added:<p>This text is underlined in red with thickness 2.</p>

Before

[___________]
|           |
| This text |
| is under- |
| lined in |
| red with |
| thick-   |
| ness 2.  |
[___________]

→

After

[___________]
|           |
| This text |
| is under- |
| lined in |
| red with |
| thick-   |
| ness 2.  |
[___________]

Plain paragraph text appears with no underline or decoration.

🔧 Browser Action:Creates DOM node and paints text with default style.

Code Sample

A paragraph with red underline of thickness 2 pixels under the text.

Tailwind

<p class="underline decoration-red-500 decoration-2">This text is underlined in red with thickness 2.</p>

Tailwind

/* Tailwind generates: */
.underline { text-decoration-line: underline; }
.decoration-red-500 { text-decoration-color: #ef4444; }
.decoration-2 { text-decoration-thickness: 2px; }

Render Quiz - 3 Questions

After applying step 2, what visual change do you see?

A The text becomes bold

B A thin underline appears below the text

C The text color changes to red

D The text is centered

Common Confusions - 2 Topics

Why doesn't the underline color change when I add decoration-red-500?

The underline color only changes if text-decoration-line includes underline. Without 'underline' class, color change has no visible effect (see step 2 and 3).

💡 Always add 'underline' class before changing underline color.

Why is my underline very thin and hard to see?

By default, underline thickness is thin. Adding decoration-2 or higher thickness classes makes it thicker and more visible (see step 4).

💡 Use decoration-thickness classes to control underline thickness.

Property Reference

Property	Value Applied	Visual Effect	Common Use
text-decoration-line	underline	Adds underline below text	Underline links or emphasize text
text-decoration-color	#ef4444 (red)	Changes underline color	Match brand colors or highlight
text-decoration-thickness	2px	Controls underline thickness	Make underline thicker or thinner
text-decoration-style	solid/dotted/dashed	Changes underline style	Create different underline looks

Concept Snapshot

Text decoration controls lines like underline under text. Use 'underline' to add underline. Change color with 'decoration-{color}'. Adjust thickness with 'decoration-{number}'. Underline only shows if 'underline' is present. Tailwind classes map to CSS text-decoration properties.