0
0
Tailwindmarkup~8 mins

Square bracket notation for custom values in Tailwind - Performance & Optimization

Choose your learning style9 modes available
Performance: Square bracket notation for custom values
MEDIUM IMPACT
This affects CSS bundle size and rendering speed by allowing custom values without extending the config, impacting initial load and style calculation.
Applying a custom color value in Tailwind CSS
Tailwind
class="bg-[#123456]"
Using a short, valid hex color reduces CSS size and speeds up style calculation.
📈 Performance Gainsaves ~0.3kb per custom value, faster style parsing
Applying a custom color value in Tailwind CSS
Tailwind
class="bg-[#1234567890abcdef]"
Using overly long hex values in square brackets creates large CSS rules and bloats the stylesheet.
📉 Performance Costadds ~0.5kb per unique long custom value to CSS bundle
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Using many unique long custom values with square bracketsNo extra DOM nodes0 reflowsHigh paint cost due to large CSS[X] Bad
Using short custom values sparingly with square bracketsNo extra DOM nodes0 reflowsModerate paint cost[!] OK
Using config-extended custom values instead of square bracketsNo extra DOM nodes0 reflowsLow paint cost[OK] Good
Rendering Pipeline
Square bracket notation generates unique CSS rules that the browser must parse and apply during style calculation and paint stages.
Style Calculation
Layout
Paint
⚠️ BottleneckStyle Calculation
Core Web Vital Affected
LCP
This affects CSS bundle size and rendering speed by allowing custom values without extending the config, impacting initial load and style calculation.
Optimization Tips
1Avoid many unique custom values in square brackets to keep CSS size small.
2Prefer extending Tailwind config for repeated custom styles.
3Use short, valid custom values to reduce parsing and paint cost.
Performance Quiz - 3 Questions
Test your performance knowledge
What is a main performance downside of using many unique custom values with Tailwind's square bracket notation?
AIt causes layout thrashing
BIt adds extra DOM nodes
CIt increases CSS bundle size and slows style calculation
DIt blocks JavaScript execution
DevTools: Performance
How to check: Record a performance profile while loading the page, then inspect the 'Style Recalculation' and 'Paint' events.
What to look for: Look for long style recalculation times and large CSS file sizes indicating many unique custom values.