Content Paths and Purging
Configure the content array correctly to ensure Tailwind scans all files and removes unused classes in production builds.
Why Purging Matters
Tailwind CSS generates utility classes for every combination of your theme values — potentially hundreds of thousands of classes. Without pruning, the raw CSS output would be several megabytes. The purging process (officially called content scanning or tree-shaking) removes every class that does not appear in your source files, shrinking the production CSS to typically just 5–50 KB. Getting your content configuration right is essential for a lean build.
How Content Scanning Works
Tailwind scans the files you list in the content array and searches for string patterns that look like Tailwind class names. It does not execute your code — it does a simple text search. Any string that matches a known utility class is included in the output. This is why you must never construct class names dynamically by concatenating strings; the scanner won't find the full class name.
// BAD: Tailwind cannot detect 'text-red-500'
const color = 'red';
const cls = 'text-' + color + '-500'; // scanner sees 'text-' + 'red' + '-500'
// GOOD: Full class names are always present in source
const cls = isError ? 'text-red-500' : 'text-green-500'; // scanner sees bothAll lessons in this course
- Anatomy of tailwind.config.js
- Content Paths and Purging
- Extending vs Overriding the Theme
- Adding and Configuring Plugins