Disabled state styling in Tailwind - Performance & Optimization

Performance: Disabled state styling

MEDIUM IMPACT

This affects the rendering speed and visual stability when styling disabled UI elements.

Styling a disabled button to indicate it is inactive

Tailwind

<button class="disabled:opacity-50 disabled:cursor-not-allowed">Click me</button>

Using opacity and cursor changes only avoids size changes and layout shifts.

📈 Performance Gainno reflow, no layout shift on disable toggle

Styling a disabled button to indicate it is inactive

Tailwind

<button class="disabled:opacity-50 disabled:cursor-not-allowed disabled:border-2 disabled:border-gray-400">Click me</button>

Adding border on disabled state changes element size causing layout shifts.

📉 Performance Costtriggers 1 reflow and 1 layout shift on disable toggle

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Disabled border change	Minimal	1 reflow per toggle	Medium paint cost	[X] Bad
Disabled opacity and cursor only	Minimal	0 reflows	Low paint cost	[OK] Good

Rendering Pipeline

When disabled styles change element size or layout, the browser recalculates layout and repaints, causing reflows and layout shifts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to size changes from border or padding.

Core Web Vital Affected

CLS

This affects the rendering speed and visual stability when styling disabled UI elements.

Optimization Tips

1Avoid styles that change element size (border, padding, font-size) on disabled states.

2Prefer opacity and cursor changes for disabled styling to prevent layout recalculations.

3Use DevTools Performance panel to detect layout shifts when toggling disabled states.

Performance Quiz - 3 Questions

Which disabled state style is least likely to cause layout shifts?

A Adding a border on disabled state

B Adding padding on disabled state

C Changing opacity on disabled state

D Changing font size on disabled state

DevTools: Performance

How to check: Record a performance profile while toggling the disabled state on the element. Look for layout and paint events.

What to look for: Check for layout shifts or reflows in the flame chart indicating expensive style changes.