Installing Tailwind CSS v3 in a Project

Installing Tailwind CSS v3 involves adding it as a PostCSS plugin through npm, generating a configuration file, and pointing it at your template files. The installation process is the same whether you are working with a plain HTML project, a Vite application, a Laravel project, or a Next.js app — the core steps are install, configure content paths, and include directives in your CSS. The content array in tailwind.config.js is critical — it tells Tailwind which files to scan for class names so the JIT engine can generate only the CSS those files actually use. Forgetting to add a file path here causes classes to disappear from the compiled output. Common paths include "./src/**/*.{html,js,jsx,ts,tsx,vue}" for front-end projects. After setup, you add three @tailwind directives to your main CSS entry point: @tailwind base (injects Preflight, a normalising stylesheet), @tailwind components (for component-layer styles), and @tailwind utilities (for all utility classes). Running your build tool then compiles everything into a single CSS file you can reference in your HTML.

Example

# 1. Install Tailwind CSS, PostCSS, and Autoprefixer
npm install -D tailwindcss postcss autoprefixer

# 2. Generate tailwind.config.js and postcss.config.js
npx tailwindcss init -p

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

# ── postcss.config.js (generated) ────────────────────
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

/* ── src/index.css ────────────────────────────────── */
@tailwind base;
@tailwind components;
@tailwind utilities;

# 3. Start the build watcher (Vite example)
npm run dev

# Or compile once with the Tailwind CLI:
npx tailwindcss -i ./src/index.css -o ./dist/output.css --watch

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned