Content configuration for tree-shaking in Tailwind - Performance & Optimization

Performance: Content configuration for tree-shaking

HIGH IMPACT

This affects the final CSS bundle size and page load speed by removing unused styles.

Reducing CSS bundle size by removing unused Tailwind styles

Tailwind

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}', './public/**/*.html'],
  theme: { extend: {} },
  plugins: [],
};

Including all relevant files ensures Tailwind removes unused styles, shrinking CSS bundle.

📈 Performance Gainreduces CSS size by 50-80%, improves LCP by 200-500ms

Reducing CSS bundle size by removing unused Tailwind styles

Tailwind

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // missing some HTML or template files
  theme: { extend: {} },
  plugins: [],
};

Not including all files where Tailwind classes appear causes unused styles to remain, increasing bundle size.

📉 Performance Costadds 100-200kb extra CSS, blocks rendering longer, slows LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Incomplete content config	N/A	N/A	High due to large CSS	[X] Bad
Complete content config	N/A	N/A	Low due to small CSS	[OK] Good

Rendering Pipeline

Tailwind's content configuration affects CSS generation before the browser renders. Smaller CSS means faster style calculation and paint.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS files

Core Web Vital Affected

LCP

This affects the final CSS bundle size and page load speed by removing unused styles.

Optimization Tips

1Always include all files where Tailwind classes appear in the content config.

2Missing files cause unused CSS to remain, increasing bundle size and slowing load.

3Smaller CSS bundles improve LCP by reducing style calculation and paint time.

Performance Quiz - 3 Questions

What happens if Tailwind's content configuration misses some files with CSS classes?

A JavaScript bundle size increases

B CSS bundle size decreases automatically

C Unused CSS stays in the bundle, increasing CSS size

D Browser ignores missing classes

DevTools: Network

How to check: Open DevTools > Network tab > Reload page > Filter by CSS > Check CSS file size

What to look for: Smaller CSS file size indicates effective tree-shaking; large CSS means unused styles remain