Integration with PostCSS and Vite

1. What is PostCSS?

PostCSS is a CSS processor that transforms your CSS with JavaScript plugins. Tailwind uses PostCSS under the hood for features like @tailwind, @apply, and automatic purging.

2. Setting Up Tailwind with Vite

Vite is a modern frontend tool that offers fast dev servers and instant HMR. Here’s how to integrate Tailwind:

// 1. Initialize Vite project
npm create vite@latest my-app
cd my-app
npm install

// 2. Install Tailwind, PostCSS & Autoprefixer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// 3. Configure tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

// 4. Create src/index.css and add:
@tailwind base;
@tailwind components;
@tailwind utilities;

// 5. Import it in main.js
import './index.css';
            

3. Using Tailwind with PostCSS (without Vite)

If you use Webpack or another bundler, configure a postcss.config.js like:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
            

4. Tips & Best Practices

• Always purge unused styles in production for minimal file sizes.
• Keep Tailwind config clean with aliases, themes, and plugin arrays.
• Use @apply only for grouping a few classes; avoid overuse.

Conclusion

Integrating Tailwind with Vite or PostCSS allows you to enjoy a fast development experience and scalable styling. It’s one of the best setups for modern frontend workflows.