Why arbitrary values exist in Tailwind - Performance Evidence

Performance: Why arbitrary values exist

MEDIUM IMPACT

Using arbitrary values affects CSS bundle size and rendering performance by allowing precise styles without bloating the stylesheet.

Applying a unique margin size not in Tailwind's default scale

Tailwind

<div class="m-[4.25rem]"></div>

Arbitrary value applies exact margin without adding new classes to the stylesheet.

📈 Performance Gainsaves CSS bundle size by avoiding new class definitions, keeps stylesheet smaller

Applying a unique margin size not in Tailwind's default scale

Tailwind

<div class="m-17"></div>

Using a non-existent predefined class forces fallback or custom CSS, increasing CSS size or causing style misses.

📉 Performance Costadds extra CSS rules or forces inline styles, increasing bundle size by ~1-2kb per unique value

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using many predefined Tailwind classes	Low	Minimal	Low	[OK] Good
Using many arbitrary values excessively	Low	Minimal	Medium (due to complex CSS selectors)	[!] OK
Using inline styles instead of arbitrary values	Low	Minimal	Low	[X] Bad (increases inline style usage)

Rendering Pipeline

Arbitrary values are parsed by Tailwind at build time and converted into CSS rules. The browser applies these rules during style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to increased CSS complexity if many arbitrary values are used

Core Web Vital Affected

LCP

Using arbitrary values affects CSS bundle size and rendering performance by allowing precise styles without bloating the stylesheet.

Optimization Tips

1Use arbitrary values only when needed to avoid bloating CSS.

2Reuse arbitrary values to keep CSS smaller and faster to process.

3Avoid excessive arbitrary values to prevent slower style calculations.

Performance Quiz - 3 Questions

What is the main performance benefit of using arbitrary values in Tailwind CSS?

A They cause more reflows during user interaction

B They reduce CSS bundle size by avoiding many new class definitions

C They increase the number of DOM nodes

D They block JavaScript execution

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the Style Recalculation and Layout timings.

What to look for: Look for long Style Calculation times or large CSS files in the Network panel indicating excessive arbitrary value usage.