Tailwind CSS

Installing Tailwind CSS & Project Setup

15 min Lesson 2 of 35

Installation Methods Overview

Tailwind CSS can be installed and configured in several ways, each suited to different project types and development workflows. In this lesson, we'll explore all major installation methods, from quick prototyping with CDN to production-ready setups with build tools.

Choosing the Right Method

CDN: Quick prototyping, learning, no build step needed
CLI: Simple projects, static sites, minimal configuration
PostCSS: Most flexible, works with any build tool, production-ready
Framework Integration: Next.js, Vite, Laravel - pre-configured setups

Method 1: CDN (Play CDN)

The fastest way to try Tailwind is via the Play CDN. This is perfect for learning, prototyping, or quick experiments, but should NOT be used in production.

CDN Setup

CDN Installation - HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CDN Example</title>

    <!-- Tailwind Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Optional: Custom Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'brand': '#1da1f2',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold text-brand">Hello Tailwind!</h1>
        <p class="text-gray-700 mt-4">This is using the CDN version.</p>
    </div>
</body>
</html>

CDN Pros and Cons

CDN Limitations

Pros: Zero setup, instant usage, great for learning
Cons: Large file size (~3MB), no purging, no custom plugins, requires JavaScript, not production-ready

The Play CDN loads the entire Tailwind CSS library dynamically. It's convenient but bloated. Use it for learning and prototyping only.

Method 2: Tailwind CLI

The Tailwind CLI is a standalone tool that processes your CSS without requiring npm or Node.js configuration. It's perfect for static sites and simple projects.

Installing Tailwind CLI

CLI Installation Steps

# 1. Install Tailwind CLI globally (optional)
npm install -g tailwindcss

# OR download standalone binary from:
# https://github.com/tailwindlabs/tailwindcss/releases

# 2. Create project directory
mkdir my-project
cd my-project

# 3. Initialize Tailwind configuration
npx tailwindcss init

# 4. Create input CSS file
# Create: src/input.css

Project Structure

CLI Project Structure

my-project/
├── src/
│   └── input.css          # Source CSS with Tailwind directives
├── dist/
│   └── output.css         # Generated CSS (auto-created)
├── index.html             # Your HTML file
└── tailwind.config.js     # Tailwind configuration

Source CSS File

src/input.css

/* Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom CSS can go here */
.btn-custom {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

The @tailwind directives tell Tailwind where to inject the base styles, component classes, and utility classes.

Understanding @tailwind Directives

@tailwind base; - Resets and base element styles
@tailwind components; - Component classes (third-party plugins)
@tailwind utilities; - All utility classes

Configuration File

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js}',
        './*.html',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

The content array tells Tailwind which files to scan for class names. This is crucial for the purging process.

Build Commands

CLI Build Commands

# Development build (watch for changes)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production build (minified, purged)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# One-time build
npx tailwindcss -i ./src/input.css -o ./dist/output.css

HTML File Setup

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CLI Project</title>

    <!-- Link to generated CSS -->
    <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind CLI!</h1>
    </div>
</body>
</html>

Method 3: PostCSS Plugin (Recommended for Production)

The most flexible and production-ready approach is using Tailwind as a PostCSS plugin. This integrates seamlessly with any build tool (Webpack, Vite, Parcel, etc.).

Installation with npm

npm Installation

# 1. Initialize npm project (if not already done)
npm init -y

# 2. Install Tailwind CSS and dependencies
npm install -D tailwindcss postcss autoprefixer

# 3. Generate configuration files
npx tailwindcss init -p

# This creates:
# - tailwind.config.js
# - postcss.config.js

PostCSS Configuration

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

PostCSS is a tool that transforms CSS with JavaScript plugins. Tailwind is a PostCSS plugin, and Autoprefixer adds vendor prefixes for better browser compatibility.

Tailwind Configuration

tailwind.config.js (Detailed)

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './src/**/*.{html,js,jsx,ts,tsx,vue}',
        './public/index.html',
        './components/**/*.{js,jsx,ts,tsx}',
    ],
    darkMode: 'class', // or 'media'
    theme: {
        extend: {
            colors: {
                'primary': {
                    50: '#eff6ff',
                    100: '#dbeafe',
                    200: '#bfdbfe',
                    300: '#93c5fd',
                    400: '#60a5fa',
                    500: '#3b82f6',
                    600: '#2563eb',
                    700: '#1d4ed8',
                    800: '#1e40af',
                    900: '#1e3a8a',
                },
            },
            fontFamily: {
                'sans': ['Inter', 'system-ui', 'sans-serif'],
            },
            spacing: {
                '128': '32rem',
                '144': '36rem',
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

Configuration Sections Explained

content: Files to scan for class names
darkMode: Dark mode strategy (class-based or media query)
theme: Customize design tokens (colors, spacing, fonts)
plugins: Official and third-party plugins

CSS File Setup

src/styles.css

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

/* Custom layer for components */
@layer components {
    .btn-primary {
        @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg;
        @apply hover:bg-blue-700 focus:ring-4 focus:ring-blue-300;
        @apply transition duration-200;
    }

    .card {
        @apply bg-white rounded-lg shadow-md p-6;
    }
}

/* Custom layer for utilities */
@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }
}

The @layer directive lets you organize custom styles into Tailwind's layers, ensuring proper ordering and purging.

Method 4: Framework Integration

Vite + Tailwind

Vite Project Setup

# 1. Create Vite project
npm create vite@latest my-project -- --template vanilla
cd my-project

# 2. Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 3. Configure content paths in tailwind.config.js
# content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}']

# 4. Add Tailwind directives to src/style.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 5. Run dev server
npm run dev

Next.js + Tailwind

Next.js Project Setup

# 1. Create Next.js app with Tailwind (built-in support)
npx create-next-app@latest my-app --typescript --tailwind
cd my-app

# Next.js automatically configures Tailwind!
# Configuration is in tailwind.config.js
# Global CSS is in app/globals.css

# 2. Run dev server
npm run dev

Create React App + Tailwind

CRA Project Setup

# 1. Create React app
npx create-react-app my-app
cd my-app

# 2. Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# 3. Configure content paths
# content: ['./src/**/*.{js,jsx,ts,tsx}']

# 4. Add Tailwind to src/index.css
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# 5. Start dev server
npm start

VS Code Integration

The official Tailwind CSS IntelliSense extension dramatically improves the development experience with autocomplete, syntax highlighting, and linting.

Installing IntelliSense Extension

Open VS Code
Go to Extensions (Cmd+Shift+X / Ctrl+Shift+X)
Search for "Tailwind CSS IntelliSense"
Install the official extension by Tailwind Labs

IntelliSense Features

Autocomplete: Suggests class names as you type
Hover Preview: Shows CSS generated by a utility class
Syntax Highlighting: Color-codes utility classes
Linting: Warns about invalid classes or conflicts

VS Code Settings

.vscode/settings.json

{
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.includeLanguages": {
        "html": "html",
        "javascript": "javascript",
        "typescript": "typescript",
        "javascriptreact": "javascriptreact",
        "typescriptreact": "typescriptreact"
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "css.validate": false,
    "tailwindCSS.experimental.classRegex": [
        ["cva\(([^)]*)\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
    ]
}

Understanding the Build Process

How Tailwind Generates CSS

When you run a Tailwind build, the following happens:

Scanning: Tailwind scans files specified in content array
Extraction: Extracts all class names (e.g., bg-blue-500, p-4)
Generation: Generates CSS for extracted classes using JIT engine
Optimization: In production, minifies and removes unused styles
Output: Writes optimized CSS to output file

JIT Mode (Just-In-Time)

Tailwind v3+ uses JIT mode by default. Instead of generating all possible classes upfront (millions of combinations), JIT generates only the classes you use, on-demand. This makes builds instant and enables arbitrary values like bg-[#1da1f2].

Development vs Production Builds

Build Comparison

# Development Build
# - Full source maps
# - Not minified (readable)
# - Fast rebuilds
# - Typically 3-10KB with JIT

NODE_ENV=development npx tailwindcss -i input.css -o output.css

# Production Build
# - Minified and compressed
# - No source maps
# - All unused styles purged
# - Typically 5-20KB final size

NODE_ENV=production npx tailwindcss -i input.css -o output.css --minify

Official Tailwind Plugins

Tailwind provides official plugins that extend functionality for common use cases:

Typography Plugin

Install Typography Plugin

# Install
npm install -D @tailwindcss/typography

# Add to tailwind.config.js
plugins: [
    require('@tailwindcss/typography'),
]

# Use in HTML
<article class="prose lg:prose-xl">
    <h1>Article Title</h1>
    <p>Beautiful typography with zero configuration.</p>
</article>

Forms Plugin

Install Forms Plugin

# Install
npm install -D @tailwindcss/forms

# Add to tailwind.config.js
plugins: [
    require('@tailwindcss/forms'),
]

# Form inputs now have better default styles
<input type="text" class="rounded-md border-gray-300">

Other Official Plugins

@tailwindcss/aspect-ratio: Maintain aspect ratios for media
@tailwindcss/line-clamp: Truncate multi-line text
@tailwindcss/container-queries: Container-based responsive design

Troubleshooting Common Setup Issues

Issue 1: Styles Not Appearing

Fix Checklist

Verify @tailwind directives are in CSS file
Check content paths in config include your HTML/JS files
Ensure build process is running (watch mode for dev)
Link correct output CSS file in HTML
Clear browser cache and hard reload

Issue 2: IntelliSense Not Working

Fix Steps

# 1. Ensure tailwind.config.js exists in project root
npx tailwindcss init

# 2. Restart VS Code
# 3. Check extension is installed and enabled
# 4. Verify workspace settings allow IntelliSense in strings

Issue 3: Build Process Slow

Ensure you're using Tailwind v3+ with JIT mode (default)
Narrow content paths to only necessary files
Don't include node_modules in content paths
Use faster build tools (Vite instead of Webpack)

Practice Exercise 1: CDN Setup

Create a simple HTML file using the Tailwind Play CDN. Build a card component with:

An image at the top
A title and description
A "Read More" button

Use only Tailwind utility classes. Experiment with colors, spacing, and shadows.

Practice Exercise 2: CLI Setup

Set up a new project using the Tailwind CLI:

Create a project folder
Initialize Tailwind configuration
Create input.css with @tailwind directives
Create index.html with a simple layout
Run build with --watch flag
Modify HTML and see changes live

Practice Exercise 3: VS Code Integration

Install and configure the Tailwind IntelliSense extension:

Install extension from VS Code marketplace
Create a Tailwind project (any method)
Test autocomplete by typing bg- in a class attribute
Hover over a utility class to see generated CSS
Try the color picker on a color utility

Summary

In this lesson, we explored multiple ways to install and configure Tailwind CSS:

CDN: Fastest for prototyping, not for production (3MB unoptimized)
CLI: Simple standalone tool, great for static sites
PostCSS: Most flexible, production-ready, works with any build tool
Framework Integration: Pre-configured setups for Vite, Next.js, Create React App

Key concepts covered:

@tailwind directives inject Tailwind styles into your CSS
tailwind.config.js controls what files are scanned and customizes the design system
postcss.config.js integrates Tailwind with PostCSS build pipeline
VS Code IntelliSense extension provides autocomplete and hover previews
JIT mode generates CSS on-demand for instant builds and smaller files
Official plugins extend Tailwind for typography, forms, and more

Now that you have Tailwind installed and configured, you're ready to start building with utility-first CSS! In the next lesson, we'll dive into utility-first fundamentals and learn how to think in utilities.