Install & Setup

# ===== Install (Vite) =====
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# Creates tailwind.config.js + postcss.config.js

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

# src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

# main entry: import './index.css';

npm run dev
# Use classes anywhere in markup.

# ===== Install (Next.js) =====
# Next already ships postcss; same npm install:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# globals.css already imported in app/layout.tsx
# Add the three @tailwind lines to globals.css

# ===== Install (standalone CLI, no Node project) =====
# Download from github.com/tailwindlabs/tailwindcss/releases
./tailwindcss -i ./input.css -o ./output.css --watch

# ===== Plugins worth installing =====
npm install -D @tailwindcss/typography     # prose-* classes for long-form content
npm install -D @tailwindcss/forms          # nicer default form styles
npm install -D @tailwindcss/aspect-ratio   # legacy aspect helper (Tailwind 3.0+ built-in)
npm install -D @tailwindcss/container-queries

# tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
export default {
  content: [...],
  theme: { extend: {} },
  plugins: [typography, forms],
};

# ===== Editor support =====
# Install 'Tailwind CSS IntelliSense' (VS Code) — autocomplete + hover docs.
# Configure prettier-plugin-tailwindcss for automatic class sorting:
npm install -D prettier prettier-plugin-tailwindcss

# ===== Verify =====
# Use a class in markup. If the build picks it up, content paths are correct.
<div class="bg-red-500 text-white p-4">should be red</div>

# ===== Patterns to internalise =====
# - Always set 'content' globs; classes are tree-shaken based on what is found
# - Install IntelliSense + prettier plugin on day one
# - Use the official forms + typography plugins where useful
# - Extend the theme; rarely override it

# ===== Pitfalls =====
# - Missing or wrong content paths -> classes do not appear in build
# - Editing dist CSS by hand -> blown away on next build
# - Forgetting to restart dev server after config changes
# - Mixing Tailwind v2 syntax with v3+ APIs

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# Add @tailwind base; @tailwind components; @tailwind utilities; to your CSS