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

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

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using many unique long custom values with square brackets	No extra DOM nodes	0 reflows	High paint cost due to large CSS	[X] Bad
Using short custom values sparingly with square brackets	No extra DOM nodes	0 reflows	Moderate paint cost	[!] OK
Using config-extended custom values instead of square brackets	No extra DOM nodes	0 reflows	Low 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

What is a main performance downside of using many unique custom values with Tailwind's square bracket notation?

A It causes layout thrashing

B It adds extra DOM nodes

C It increases CSS bundle size and slows style calculation

D It 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.