Getting Started

Installation

Tailwind CSS v4 installs as a PostCSS plugin or Vite plugin. For v3 projects, install tailwindcss, postcss, and autoprefixer. Initialize with npx tailwindcss init to generate a config file.

Tailwind v4 simplifies setup — add @import "tailwindcss" to your CSS entry file and configure via CSS instead of JavaScript. Both approaches produce the same utility-first workflow.

• Tailwind v4 uses CSS-first configuration with @theme
• v3 uses tailwind.config.js — still widely used in existing projects
• Official Tailwind CSS IntelliSense VS Code extension is essential

# Tailwind v4 (recommended)
npm install tailwindcss @tailwindcss/vite

# vite.config.ts
import tailwindcss from '@tailwindcss/vite';
export default { plugins: [tailwindcss()] };

Configuration

The tailwind.config.js file (v3) or @theme block (v4) defines your design system — colors, spacing, fonts, breakpoints, and plugins. Content paths tell Tailwind which files to scan for class names.

Misconfigured content paths are the most common setup issue — if classes are missing in production, your content array likely does not include all template files.

// tailwind.config.js (v3)
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
  theme: {
    extend: {
      colors: { brand: '#2563eb' },
      fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
    },
  },
};

Directives and Layers

Tailwind v3 uses @tailwind base, components, and utilities directives. v4 uses @import "tailwindcss". Base layer includes Preflight (CSS reset). Components layer holds custom component classes. Utilities layer contains all utility classes.

Add custom base styles with @layer base, component styles with @layer components, and utility overrides with @layer utilities. Layer order ensures correct cascade priority.

@import "tailwindcss";

@layer base {
  h1 { @apply text-3xl font-bold; }
}

@layer components {
  .btn { @apply px-4 py-2 rounded-lg font-semibold; }
}

Your First Components

Apply utility classes directly in HTML or JSX. Combine spacing, color, typography, and layout utilities to build components without writing custom CSS.

Start with the Tailwind documentation search — it is faster than memorizing class names. Common patterns like flex items-center justify-between appear in nearly every layout.

<button class="bg-blue-600 hover:bg-blue-700 text-white
  px-4 py-2 rounded-lg font-semibold transition-colors">
  Get Started
</button>

<div class="max-w-4xl mx-auto px-4 py-8">
  <h1 class="text-4xl font-bold text-gray-900">Hello Tailwind</h1>
</div>

Editor Setup

Install Tailwind CSS IntelliSense for autocomplete, syntax highlighting, and linting. Configure class sorting with Prettier plugin tailwindcss for consistent class order across your team.

Enable experimental classRegex in VS Code settings for autocomplete inside clsx, cn, and cva function calls — essential for React component libraries.

// .vscode/settings.json
{
  "tailwindCSS.experimental.classRegex": [
    ["cn\\(([^)]*)\\)", "['\"]([^'\"]*)['\"]"]
  ]
}