Installation

This lesson walks you through installing Tailwind CSS step by step. You'll set up Tailwind with a build tool like Vite, which is the recommended approach for modern projects.

Prerequisites

You need Node.js installed (version 14 or higher). Check by running node -v in your terminal. If you don't have it, download it from nodejs.org.

Step 1: Create a project

Start a new project with Vite. The vanilla template works perfectly.

npm create vite@latest my-tailwind-project -- --template vanilla
cd my-tailwind-project
npm install
    

Step 2: Install Tailwind

Install Tailwind CSS and its dependencies as dev dependencies.

npm install -D tailwindcss @tailwindcss/vite
    

The @tailwindcss/vite package handles the build integration automatically.

Step 3: Configure Vite

Add the Tailwind plugin to your Vite config file.

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

Step 4: Import Tailwind

Add Tailwind to your main CSS file using the @import directive.

@import "tailwindcss";
    

Step 5: Start building

Run the dev server and start adding Tailwind classes to your HTML.

npm run dev
    

Open your browser, and you'll see your styled page. Every utility class you add in your HTML will just work.