How can I reduce unused Tailwind CSS classes in production builds?

Question

Q&A Network · Accepted Answer

To reduce unused Tailwind CSS classes in production builds, you can use Tailwind's built-in purge feature, which removes unused styles from your final CSS file. This is typically configured in your `tailwind.config.js` file.


    
    // tailwind.config.js
    module.exports = {
      purge: {
        content: ['./src/**/*.html', './src/**/*.js'],
        options: {
          safelist: ['bg-red-500', 'text-center'], // classes to keep
        },
      },
      // other configurations...
    }

ADDITIONAL COMMENT:

The `purge` option scans your specified files for Tailwind class usage and removes unused styles.
Ensure your file paths in `content` match your project's structure to effectively purge unused classes.
The `safelist` option allows you to specify classes that should not be purged, even if they are not found in your files.
Run your build process (e.g., using a tool like Webpack or PostCSS) to apply these changes.

✅ Answered with Tailwind CSS best practices.

How can I reduce unused Tailwind CSS classes in production builds?

Asked on Sep 05, 2025

Answer

The Q&A Network