Tailwind CSS Setup

What Does Tailwind Setup Involve?

A production-ready Tailwind setup has three pieces: the Tailwind package installed via npm, a configuration file that tells Tailwind which files to scan for class names, and a CSS file where Tailwind injects its generated styles.

Most modern frameworks (Vite, Next.js, Astro, Remix) provide official Tailwind integrations that automate most of this, but understanding the manual steps helps you debug configuration issues quickly.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This installs Tailwind, PostCSS, and Autoprefixer, then generates a starter tailwind.config.js and postcss.config.js.

CSS Entry File Directives

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

• @tailwind base injects sensible default browser resets.
• @tailwind components injects any component classes registered via plugins or @layer components.
• @tailwind utilities injects every utility class Tailwind generates.
• In Tailwind v4, this is simplified to a single @import "tailwindcss"; line.

Tailwind Setup Cheatsheet

The commands and config keys you need for a working install.

Installing Tailwind With npm

The recommended installation method for any real project is npm, since it integrates with your existing build tool and enables the just-in-time compiler, custom configuration, and plugins.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The -p flag also generates a postcss.config.js file wired up with Autoprefixer.

Configuring Content Paths

The content array in tailwind.config.js tells Tailwind exactly which files to scan for class names. If a file isn't listed, any classes used only in that file will be missing from your final CSS.

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

Always include every file extension your project uses, including framework-specific ones like .astro or .vue.

Setup With Vite

Vite-based projects can use the official @tailwindcss/vite plugin (Tailwind v4) or the standard PostCSS pipeline (Tailwind v3) for the fastest development experience.

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

Common Mistakes

• Forgetting to add every relevant file extension to the content array, which silently drops needed classes.
• Linking the source CSS file directly instead of the compiled output file in production.
• Not running the build/watch process, so newly added classes never make it into the final CSS.
• Installing Tailwind as a regular dependency instead of a dev dependency.
• Mixing Tailwind v3 @tailwind directives with v4-only import syntax after an incomplete upgrade.

Key Takeaways

• A working Tailwind setup needs the package installed, a config file, and directives in a CSS entry file.
• The content array must include every file type where you use Tailwind classes.
• Most frameworks provide an official plugin that automates the wiring for you.
• Tailwind v4 simplifies setup to a single @import "tailwindcss"; statement.
• Always link the compiled CSS output, not the raw source file, in your HTML.