Installing Tailwind CSS

Tailwind offers two paths: CDN for quick prototyping, npm for production. Use npm for anything real — CDN cannot purge unused classes or support customization.

CDN (quick start only)

<script src="https://cdn.tailwindcss.com"></script>

Works instantly but ships the full 3MB framework. Never use in production.

Production setup with Vite

npm create vite@latest my-app -- --template vanilla
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure content paths in the generated config:

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: []
}

Add the three directives to your main CSS:

/* src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Run npm run dev. Tailwind generates only the classes your files use — final bundle is tiny.

Verify it works

<h1 class="text-3xl font-bold text-blue-600">Tailwind works!</h1>