Minifying Tailwind CSS with PostCSS

PostCSS is a tool that processes your CSS and can be configured to include Tailwind and automatically minify your final output for production. This reduces file size and improves performance.

1. Setting Up PostCSS

Install PostCSS, Tailwind, and Autoprefixer using npm:


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates both a tailwind.config.js and postcss.config.js file.

2. Configure `postcss.config.js`


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Autoprefixer ensures browser compatibility by adding vendor prefixes.

3. Build and Minify

Run the Tailwind CLI with --minify to minify the CSS:


npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

This creates a compact production-ready CSS file.

4. Typical Project Structure


├── src/
│   └── input.css     ← @tailwind base/components/utilities
├── dist/
│   └── output.css    ← Minified CSS here
├── postcss.config.js
├── tailwind.config.js

5. Optional Enhancements

Add cssnano for advanced minification
Use vite or webpack for automatic builds
Include safelist in Tailwind config for dynamic classes

Conclusion

Minifying Tailwind CSS with PostCSS is essential for production readiness. With just a few commands, you can drastically reduce CSS file size and boost performance.

← Previous: Purging Unused CSS for Production Next: Avoiding Class Bloat →