0
0
Tailwindmarkup~8 mins

Disabled state styling in Tailwind - Performance & Optimization

Choose your learning style9 modes available
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
PatternDOM OperationsReflowsPaint CostVerdict
Disabled border changeMinimal1 reflow per toggleMedium paint cost[X] Bad
Disabled opacity and cursor onlyMinimal0 reflowsLow 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
Test your performance knowledge
Which disabled state style is least likely to cause layout shifts?
AAdding a border on disabled state
BAdding padding on disabled state
CChanging opacity on disabled state
DChanging 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.