PurgeCSS Setup in Tailwind CSS

PurgeCSS is a tool used to remove unused CSS from your final build, making your CSS file smaller and more efficient. Tailwind CSS integrates PurgeCSS in its build process to keep only the CSS classes you actually use in your project.

How PurgeCSS Works with Tailwind

• Scans your source files (HTML, JS, JSX, Vue, etc.) to find Tailwind class names.

• Removes unused styles from the generated CSS during production builds.

• Keeps your final CSS bundle small and optimized.

Setting Up PurgeCSS in tailwind.config.js

Tailwind CSS v3+ uses the content option (previously called purge) to specify which files to scan.

Example Config:

module.exports = {  content: [    './src/**/*.{html,js,jsx,ts,tsx,vue}', // Add all files where you use Tailwind classes    './public/index.html',  ],  theme: {    extend: {},  },  plugins: [],}

Important Notes:

• Use glob patterns to cover all your source files.

• Include all template and JavaScript/TypeScript files where Tailwind classes might appear.

• During development, PurgeCSS runs but usually doesn't remove anything so you can freely test styles.

• When you run a production build, unused CSS is stripped out.

Using with Build Tools

If you're using tools like PostCSS, Webpack, Vite, or Next.js, Tailwind’s JIT mode automatically purges unused styles based on the content array during production builds.

Example with PostCSS:

// postcss.config.jsmodule.exports = {  plugins: {    tailwindcss: {},    autoprefixer: {},  }}

Run production build with:

NODE_ENV=production npx tailwindcss -o build.css --minify

Legacy Purge Option (Before Tailwind v3)

Older Tailwind versions use purge key instead of content:

module.exports = {  purge: ['./src/**/*.{js,jsx,ts,tsx,html}'],  // ...}

Summary

• Add all source files to the content array in tailwind.config.js.

• Tailwind will scan these files for used class names.

• Unused CSS is removed in production builds automatically.

• Ensures your final CSS is as small as possible.

If you want, I can help you write a full example config for your specific project setup!