Part 3: Installing Tailwind CSS via Vite and PostCSS

The most common and performant way to use Tailwind CSS in modern web development is via a bundler like Vite with PostCSS.

1. Create a New Project

npm create vite@latest my-tailwind-app -- --template react
cd my-tailwind-app
npm install

2. Install Tailwind CSS and Peer Dependencies

Install tailwindcss, postcss, and autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Generate the initial configuration files:

npx tailwindcss init -p

This creates two essential files in your root directory: 1. tailwind.config.js 2. postcss.config.js

3. Configure Template Paths in tailwind.config.js

Tailwind needs to scan your project files to identify which utility classes you actually used:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add Tailwind Directives to CSS

Open src/index.css and replace its contents with the three core Tailwind layers:

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

5. Verify the Setup

Open src/App.jsx and test some Tailwind classes:

export default function App() {
  return (
    <div className="min-h-screen bg-slate-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-2xl shadow-xl border border-slate-200 text-center max-w-sm">
        <h1 className="text-3xl font-extrabold text-blue-600 mb-2">
          Tailwind CSS
        </h1>
        <p className="text-slate-600">
          Installed and running with Vite and PostCSS!
        </p>
        <button className="mt-6 px-6 py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-200">
          Get Started
        </button>
      </div>
    </div>
  );
}

Start the dev server:

npm run dev

Key Takeaways

• Install tailwindcss, postcss, and autoprefixer.
• Define content paths in tailwind.config.js so Tailwind scans your template files.
• Inject @tailwind base;, @tailwind components;, and @tailwind utilities; in your root CSS.

In Part 4, we explore installation via the Standalone CLI and Play CDN!