@apply for extracting patterns in Tailwind - Performance & Optimization

Performance: @apply for extracting patterns

MEDIUM IMPACT

This affects CSS bundle size and browser rendering by reusing styles efficiently.

Reusing common Tailwind styles across multiple selectors

Tailwind

.btn-base { @apply px-4 py-2 rounded; } .btn-primary { @apply btn-base bg-blue-500 text-white; } .btn-secondary { @apply btn-base bg-gray-500 text-white; }

Extracts shared styles into a base class, reducing duplication and CSS size.

📈 Performance GainSaves CSS bytes and reduces style recalculation time.

Reusing common Tailwind styles across multiple selectors

Tailwind

.btn-primary { @apply bg-blue-500 text-white px-4 py-2 rounded; } .btn-secondary { @apply bg-gray-500 text-white px-4 py-2 rounded; }

Repeating similar utility classes in multiple selectors increases CSS size and parsing time.

📉 Performance CostAdds extra CSS bytes and slightly longer style calculation.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated utility classes without @apply	N/A	0	Medium due to larger CSS	[X] Bad
Extracted shared styles with @apply	N/A	0	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

The browser parses CSS, calculates styles, and applies them to elements. Using @apply reduces repeated CSS rules, lowering style calculation and paint costs.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation

Core Web Vital Affected

LCP

This affects CSS bundle size and browser rendering by reusing styles efficiently.

Optimization Tips

1Use @apply to extract common utility classes and avoid repeating styles.

2Smaller CSS files load faster and reduce style calculation time.

3Avoid duplicating utility classes across selectors to improve LCP.

Performance Quiz - 3 Questions

How does using @apply in Tailwind CSS affect page load performance?

A It causes more DOM nodes to be created.

B It increases JavaScript bundle size significantly.

C It reduces CSS file size by reusing styles, improving load speed.

D It delays the first paint by blocking rendering.

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by CSS files, and compare file sizes with and without @apply usage.

What to look for: Smaller CSS file size and faster CSS download indicate better performance with @apply.