Tailwind CSS Academy · Lesson

Analyzing and Reducing Bundle Size

Measure your final CSS output size, identify unused styles slipping through, and tune your content globs for maximum purge efficiency.

Why Bundle Size Still Matters With JIT

Tailwind's JIT engine eliminates most unused CSS automatically, but bundle size can still grow if you are not careful. An improperly configured content glob can include too many files, a large safelist can add hundreds of classes, or complex arbitrary values can inflate the output.

Even a well-configured Tailwind project benefits from occasional bundle auditing to confirm the output is as small as it should be and to catch configuration issues before they reach production.

Measuring Your CSS Output Size

The first step in analyzing your bundle is knowing its current size. Build your Tailwind CSS in production mode and check the file size before and after minification and compression.

Use wc -c to check raw bytes, and compare the gzip-compressed size which is what browsers actually download. A well-optimized Tailwind production stylesheet is typically 5-15KB uncompressed and 2-5KB gzipped.

# Build production CSS
NODE_ENV=production npx tailwindcss -i input.css -o dist/output.css --minify

# Check uncompressed size
wc -c dist/output.css
# Example output: 12048 dist/output.css (12KB uncompressed)

# Check gzipped size
gzip -c dist/output.css | wc -c
# Example output: 3421 (3.4KB gzipped — excellent)

# If size > 50KB uncompressed, investigate further

All lessons in this course

← Back to Tailwind CSS Academy