Text decoration and underline in Tailwind - Performance & Optimization

Performance: Text decoration and underline

LOW IMPACT

This affects the paint and composite stages of page rendering, impacting how quickly text styles appear and update.

Applying underline styles to text links

Tailwind

<a class="underline decoration-blue-500 hover:decoration-blue-700">Link</a>

Using Tailwind's text-decoration utilities leverages native underline styles, avoiding layout changes.

📈 Performance Gainsingle paint, no reflow on hover

Applying underline styles to text links

Tailwind

<a class="border-b-2 border-blue-500 hover:border-blue-700">Link</a>

Using border properties to simulate underline causes layout shifts and repaints on hover.

📉 Performance Costtriggers multiple reflows and repaints on hover

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using border for underline	Minimal	Multiple on hover	High due to repaint and layout shift	[X] Bad
Using text-decoration underline	Minimal	None on hover	Low paint cost	[OK] Good

Rendering Pipeline

Text decoration changes affect the paint and composite stages because they alter how text is visually styled without changing layout.

→Paint

→Composite

⚠️ BottleneckPaint stage is most expensive due to redrawing text decorations.

Core Web Vital Affected

CLS

This affects the paint and composite stages of page rendering, impacting how quickly text styles appear and update.

Optimization Tips

1Use Tailwind's underline and decoration utilities instead of borders for underlines.

2Avoid styles that change element size or position on hover to prevent layout shifts.

3Test hover effects in DevTools Performance panel to catch reflows and repaints.

Performance Quiz - 3 Questions

Which CSS property is best for adding an underline without causing layout shifts?

A border-bottom

B text-decoration: underline

C box-shadow

D padding-bottom

DevTools: Performance

How to check: Record a performance profile while hovering over the link. Look for layout and paint events triggered by style changes.

What to look for: Check if hover triggers layout shifts or excessive paint times indicating inefficient underline styling.