0
0
Tailwindmarkup~8 mins

Text decoration and underline in Tailwind - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Using border for underlineMinimalMultiple on hoverHigh due to repaint and layout shift[X] Bad
Using text-decoration underlineMinimalNone on hoverLow 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
Test your performance knowledge
Which CSS property is best for adding an underline without causing layout shifts?
Aborder-bottom
Btext-decoration: underline
Cbox-shadow
Dpadding-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.