Auditing Your CSS Output
Use tools like PurgeCSS reports and bundle analyzers to inspect what Tailwind classes made it into your production build and why.
Why Audit Your CSS Output
Even with Tailwind's JIT engine removing unused styles, your production CSS bundle can grow unexpectedly. Auditing your CSS output means inspecting the final compiled file to understand what made it in, how large it is, and whether anything unnecessary slipped through. A lean stylesheet loads faster, parses faster, and improves Core Web Vitals scores.
Measuring Your Bundle Size
The simplest audit starts with measuring file size. After building your project, check the size of the generated CSS file. Gzip size is the number that matters for real-world performance because browsers decompress on the fly. A well-tuned Tailwind output is typically 5–15 KB gzipped for most projects.
# Build and check output size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
ls -lh ./dist/output.css
gzip -k ./dist/output.css && ls -lh ./dist/output.css.gzAll lessons in this course
- Auditing Your CSS Output
- Class Sorting and Prettier Plugin
- Linting Tailwind With ESLint
- Team Conventions and Style Guide