Using Tailwind CSS with PostCSS

Introduction 🚀

Tailwind CSS integrates beautifully with PostCSS, a powerful CSS processing tool used in many modern frontend workflows. When using Tailwind with PostCSS, you unlock advanced features like:autoprefixing, nesting support, minification, and cleaner build pipelines.

>>“PostCSS + Tailwind = a modern, optimized, and production-ready CSS workflow.” ✨

Why Use Tailwind with PostCSS? 🧠

  • ⚡ Enables plugins like Autoprefixer automatically
  • 🧹 Automatically removes unused CSS in production
  • 🔧 Plays well with bundlers (Vite, Webpack, Next.js, etc.)
  • 📦 Cleaner and more scalable file structure
  • 🌱 Native CSS features like nesting via plugins

Setup: Tailwind + PostCSS 📌

Step 1: Create a Project Folder 📁

Create folder

mkdir tailwind-postcss
cd tailwind-postcss

Step 2: Initialize npm 📦

npm init

npm init -y

Step 3: Install Tailwind + PostCSS + Autoprefixer 🎉

Install required packages

npm install -D tailwindcss postcss autoprefixer

Step 4: Create Configuration Files 🏗️

Generate Tailwind config

npx tailwindcss init -p

This command creates two files:

FilePurpose
tailwind.config.jsCustomize Tailwind settings
postcss.config.jsLoad Tailwind + Autoprefixer plugins

postcss.config.js Structure 🧩

postcss.config.js

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

Step 5: Create the Input CSS File 🎨

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Note

💡 For Tailwind v4+, you can replace the above with @import "tailwindcss"

Step 6: Build CSS Using PostCSS 🏗️

Use the PostCSS CLI to process Tailwind and generate final CSS.

Build command

npx postcss src/input.css -o dist/output.css

For auto-watching changes:

Watch mode

npx postcss src/input.css -o dist/output.css --watch

Step 7: Use Tailwind in HTML 📄

index.html

<!DOCTYPE html>
<html>
<head>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">

  <div class="p-6 bg-white shadow-xl rounded-xl">
    <h1 class="text-3xl font-bold text-blue-600">Tailwind + PostCSS 🎉</h1>
  </div>

</body>
</html>

Folder Structure 🗂️

Project Structure

project/
├── src/
│   └── input.css
├── dist/
│   └── output.css
├── index.html
├── postcss.config.js
├── tailwind.config.js
└── package.json

Advantages of PostCSS Workflow 🌟

  • 🌬️ Perfect for production builds
  • 🧩 Easy plugin support (nesting, custom media, etc.)
  • 📦 Integrates with bundlers & frameworks
  • ⚡ Optimized CSS output

Production Build 🏁

Minified production build

NODE_ENV=production npx postcss src/input.css -o dist/output.css --verbose

Note

🧹 Tailwind automatically removes unused classes in production whenNODE_ENV=production is set.

Additional Resources 🔗

>>“PostCSS is the engine, Tailwind is the power — together they build perfect CSS.” 💙