Installation and Configuration

BEGINNER

Learn how to install Tailwind CSS using npm, pnpm, or yarn. Set up configuration files, configure PostCSS, and optimize your development environment with editor extensions.

90 min

Tutorial 2 of 12

Learning Objectives

Install Tailwind CSS using npm/yarn/pnpm
Set up Tailwind using CDN for quick prototyping
Configure tailwind.config.js properly
Set up PostCSS and Autoprefixer
Configure editor extensions for optimal workflow

Introduction

Setting up Tailwind CSS properly is crucial for a smooth development experience. While Tailwind can be installed in minutes, understanding the configuration options, build tools, and development environment will save you hours of frustration later.

In this comprehensive lesson, you'll learn three ways to use Tailwind CSS: via CDN for quick prototyping, via CLI for simple projects, and via PostCSS for production applications. You'll also set up your development environment with the essential VS Code extensions that make working with Tailwind a breeze.

By the end of this lesson, you'll have Tailwind CSS fully configured and ready for professional development, with intellisense, autocomplete, and all the tools you need for maximum productivity.

Installation Method 1: Tailwind CLI (Recommended for Learning)

The Tailwind CLI is the fastest way to get started with Tailwind CSS. Perfect for learning, prototyping, and simple projects.

Step 1: Install Tailwind CSS

Bash

1# Using npm
2npm install -D tailwindcss
3
4# Using pnpm (faster)
5pnpm add -D tailwindcss
6
7# Using yarn
8yarn add -D tailwindcss

Step 2: Initialize Configuration

Bash

1npx tailwindcss init

This creates tailwind.config.js:

JavaScript

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [],
4  theme: {
5    extend: {},
6  },
7  plugins: [],
8}

Step 3: Configure Content Paths

Tell Tailwind where to find your HTML/JSX files:

JavaScript

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    "./src/**/*.{html,js,jsx,ts,tsx}",
5    "./public/**/*.html",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

Step 4: Create CSS File

Create src/input.css:

CSS

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Step 5: Build Tailwind CSS

Bash

1npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Step 6: Include in HTML

HTML

1<!DOCTYPE html>
2<html>
3<head>
4  <link href="/dist/output.css" rel="stylesheet">
5</head>
6<body>
7  <h1 class="text-3xl font-bold underline">
8    Hello Tailwind!
9  </h1>
10</body>
11</html>

Pros:

Simple setup, no build tools needed
Perfect for learning
Fast compilation with watch mode
Ideal for static HTML projects

Cons:

No HMR (Hot Module Replacement)
Manual process for production builds
Not integrated with modern frameworks

Package.json Scripts:

JSON

1{
2  "scripts": {
3    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
4    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
5  }
6}

Now you can run:

npm run dev - Development with watch mode
npm run build - Production build (minified)

Installation Method 2: PostCSS (Recommended for Production)

PostCSS integration is the standard for production applications. Works seamlessly with Vite, Next.js, Create React App, and other modern tools.

Step 1: Install Dependencies

Bash

1npm install -D tailwindcss postcss autoprefixer

Step 2: Initialize Configuration

Bash

1npx tailwindcss init -p

This creates TWO files:

tailwind.config.js:

JavaScript

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

postcss.config.js:

JavaScript

1module.exports = {
2  plugins: {
3    tailwindcss: {},
4    autoprefixer: {},
5  },
6}

Step 3: Create CSS Entry File

Create src/index.css:

CSS

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Step 4: Import in Your App

For React/Vue/Svelte, import CSS in your entry file:

JavaScript

1// src/main.jsx or src/index.jsx
2import './index.css'

Framework-Specific Setup:

Vite (Recommended):

Bash

1npm create vite@latest my-project
2cd my-project
3npm install -D tailwindcss postcss autoprefixer
4npx tailwindcss init -p

Next.js (Built-in Support):

Bash

1npx create-next-app@latest my-project --tailwind

Already configured! Just start coding.

Create React App:

Bash

1npx create-react-app my-project
2cd my-project
3npm install -D tailwindcss postcss autoprefixer
4npx tailwindcss init -p

Laravel:

Bash

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

Laravel Mix or Vite integration.

Pros:

Industry standard
HMR support
Framework integration
Automatic optimization
Better developer experience

Cons:

Requires build tools
More complex setup
Learning curve for PostCSS

Installation Method 3: CDN (Quick Prototyping Only)

The CDN approach is perfect for quick demos, learning, or prototyping. NOT recommended for production.

Play CDN (Latest Features):

HTML

1<!DOCTYPE html>
2<html>
3<head>
4  <script src="https://cdn.tailwindcss.com"></script>
5</head>
6<body>
7  <h1 class="text-3xl font-bold underline">
8    Hello Tailwind!
9  </h1>
10</body>
11</html>

With Configuration:

HTML

1<!DOCTYPE html>
2<html>
3<head>
4  <script src="https://cdn.tailwindcss.com"></script>
5  <script>
6    tailwind.config = {
7      theme: {
8        extend: {
9          colors: {
10            brand: '#ff6b6b',
11          }
12        }
13      }
14    }
15  </script>
16</head>
17<body>
18  <h1 class="text-3xl font-bold text-brand">
19    Custom Color!
20  </h1>
21</body>
22</html>

With Custom CSS:

HTML

1<!DOCTYPE html>
2<html>
3<head>
4  <script src="https://cdn.tailwindcss.com"></script>
5  <style type="text/tailwindcss">
6    @layer components {
7      .btn-primary {
8        @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
9      }
10    }
11  </style>
12</head>
13<body>
14  <button class="btn-primary">
15    Custom Component
16  </button>
17</body>
18</html>

Pros:

Zero setup
Perfect for CodePen, JSFiddle
Great for learning
Instant prototyping
No build step

Cons:

Large file size (~3MB uncompressed)
No tree-shaking
Performance impact
NOT for production
Limited customization
No plugin support

When to Use CDN:

✅ Learning Tailwind CSS

✅ Quick prototypes

✅ CodePen demos

✅ Documentation examples

✅ Email template testing

❌ Production websites

❌ Performance-critical apps

❌ Large projects

❌ Need plugins

Configuring tailwind.config.js

The tailwind.config.js file is the heart of your Tailwind setup. Understanding its structure unlocks full customization power.

Basic Structure:

JavaScript

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [],      // Where to look for classes
4  theme: {},        // Customize design system
5  plugins: [],      // Add plugins
6  darkMode: 'media', // Dark mode strategy
7  prefix: '',       // Class prefix
8  important: false, // Important all utilities
9  separator: ':',   // Variant separator
10}

Content Configuration (CRITICAL):

This tells Tailwind which files to scan for class names:

JavaScript

1module.exports = {
2  content: [
3    "./index.html",
4    "./src/**/*.{js,jsx,ts,tsx,vue,html}",
5    "./components/**/*.{js,jsx,ts,tsx}",
6    // Add all files that contain Tailwind classes
7  ],
8}

Important: If Tailwind doesn't find your classes, they won't be generated!

Theme Configuration:

Customize or extend the default theme:

JavaScript

1module.exports = {
2  theme: {
3    // Override defaults (replaces entire scale)
4    screens: {
5      sm: '640px',
6      md: '768px',
7      lg: '1024px',
8      xl: '1280px',
9    },
10
11    // Extend defaults (adds to existing scale)
12    extend: {
13      colors: {
14        brand: {
15          50: '#f0f9ff',
16          100: '#e0f2fe',
17          500: '#0ea5e9',
18          900: '#0c4a6e',
19        },
20      },
21      spacing: {
22        '128': '32rem',
23        '144': '36rem',
24      },
25      fontFamily: {
26        sans: ['Inter', 'sans-serif'],
27      },
28    },
29  },
30}

Plugin Configuration:

JavaScript

1module.exports = {
2  plugins: [
3    require('@tailwindcss/forms'),
4    require('@tailwindcss/typography'),
5    require('@tailwindcss/aspect-ratio'),
6  ],
7}

Dark Mode Configuration:

JavaScript

1module.exports = {
2  darkMode: 'class', // or 'media' or false
3}

Prefix Configuration:

Avoid conflicts with other CSS:

JavaScript

1module.exports = {
2  prefix: 'tw-',
3}

Now classes become: tw-bg-blue-500, tw-text-white

Production Optimization:

Tailwind automatically purges unused CSS in production. Ensure your content paths are correct!

Full Example (Real Project):

JavaScript

1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  darkMode: 'class',
8  theme: {
9    extend: {
10      colors: {
11        brand: {
12          primary: '#3b82f6',
13          secondary: '#8b5cf6',
14        },
15      },
16      fontFamily: {
17        sans: ['Inter var', 'sans-serif'],
18      },
19      spacing: {
20        '128': '32rem',
21      },
22      animation: {
23        'spin-slow': 'spin 3s linear infinite',
24      },
25    },
26  },
27  plugins: [
28    require('@tailwindcss/forms'),
29    require('@tailwindcss/typography'),
30  ],
31}

TypeScript Support:

For type safety:

TypeScript

1import type { Config } from 'tailwindcss'
2
3export default {
4  content: ['./src/**/*.{js,ts,jsx,tsx}'],
5  theme: {
6    extend: {},
7  },
8  plugins: [],
9} satisfies Config

PostCSS Configuration and Autoprefixer

PostCSS processes your CSS and applies transformations. Autoprefixer adds vendor prefixes automatically.

postcss.config.js:

JavaScript

1module.exports = {
2  plugins: {
3    tailwindcss: {},
4    autoprefixer: {},
5  },
6}

What This Does:

tailwindcss: Processes @tailwind directives and generates utility classes
autoprefixer: Adds vendor prefixes based on browserslist

Browserslist Configuration:

Add to package.json:

JSON

1{
2  "browserslist": [
3    "> 1%",
4    "last 2 versions",
5    "not dead"
6  ]
7}

Or create .browserslistrc:

Text

1> 1%
2last 2 versions
3not dead
4not ie 11

Advanced PostCSS Configuration:

JavaScript

1module.exports = {
2  plugins: {
3    'postcss-import': {},
4    'tailwindcss/nesting': {},
5    tailwindcss: {},
6    autoprefixer: {},
7    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
8  },
9}

Plugins Explained:

postcss-import: Inline @import statements
tailwindcss/nesting: Enable CSS nesting (like Sass)
cssnano: Minify CSS for production

CSS Nesting Example:

CSS

1.btn {
2  @apply px-4 py-2 rounded;
3
4  &:hover {
5    @apply bg-blue-600;
6  }
7
8  &.btn-large {
9    @apply px-6 py-3 text-lg;
10  }
11}

Input CSS File:

CSS

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5/* Custom component layer */
6@layer components {
7  .btn-primary {
8    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
9  }
10}
11
12/* Custom utility layer */
13@layer utilities {
14  .scroll-snap-none {
15    scroll-snap-type: none;
16  }
17}

Why Layers Matter:

base: Reset styles, element defaults
components: Reusable component classes
utilities: Utility classes (Tailwind generates these)

Layers ensure proper CSS specificity and ordering.

Editor Setup: VS Code Extensions

The right editor extensions transform your Tailwind development experience from good to amazing.

1. Tailwind CSS IntelliSense (MUST HAVE)

Install:

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search "Tailwind CSS IntelliSense"
Install (by Tailwind Labs)

Features:

✅ Autocomplete for class names

✅ CSS value preview on hover

✅ Linting (warns about conflicts)

✅ Class name completion in strings

✅ Syntax highlighting

✅ Color preview

Usage:

Type bg- and see all background utilities with previews!

Settings (settings.json):

JSON

1{
2  "tailwindCSS.experimental.classRegex": [
3    ["class:\\s*?["\']`([^"'`]*)",
4    ["classList.add\\(([^)]*)\\)", "["'`]([^"'`]*)["'`]"]
5  ],
6  "editor.quickSuggestions": {
7    "strings": true
8  }
9}

2. Prettier + Prettier Plugin Tailwind CSS

Install:

Bash

1npm install -D prettier prettier-plugin-tailwindcss

Create .prettierrc:

JSON

1{
2  "plugins": ["prettier-plugin-tailwindcss"],
3  "semi": true,
4  "singleQuote": true,
5  "tabWidth": 2
6}

What It Does:

Automatically sorts Tailwind classes in recommended order:

Before:

HTML

1<div class="text-white bg-blue-500 p-4 rounded hover:bg-blue-600">

After (auto-sorted):

HTML

1<div class="rounded bg-blue-500 p-4 text-white hover:bg-blue-600">

Order: Layout → Positioning → Sizing → Spacing → Typography → Visual → Misc

3. Headwind (Class Sorter Alternative)

If not using Prettier, Headwind sorts classes:

JSON

1{
2  "headwind.runOnSave": true
3}

4. CSS Peek

See CSS definitions inline:

Ctrl+Click on class name
See generated CSS

5. Color Highlight

Highlights color values:

bg-blue-500 shows blue color underline
#3b82f6 shows color preview

Complete VS Code Settings:

JSON

1{
2  // Tailwind IntelliSense
3  "tailwindCSS.includeLanguages": {
4    "typescript": "javascript",
5    "typescriptreact": "javascript"
6  },
7  "tailwindCSS.experimental.classRegex": [
8    "class:\\s*?["\']`([^"'`]*)"
9  ],
10
11  // Editor
12  "editor.quickSuggestions": {
13    "strings": true
14  },
15  "editor.formatOnSave": true,
16  "editor.defaultFormatter": "esbenp.prettier-vscode",
17
18  // CSS
19  "css.validate": false,
20  "scss.validate": false,
21
22  // Files
23  "files.associations": {
24    "*.css": "tailwindcss"
25  }
26}

Keyboard Shortcuts:

Ctrl+Space: Trigger autocomplete
Ctrl+Shift+P → "Sort Tailwind Classes": Sort manually
Alt+Shift+F: Format document

Troubleshooting:

IntelliSense not working?

Ensure tailwind.config.js exists
Reload VS Code
Check Output → Tailwind CSS Language Server

Classes not found?

Verify content paths in config
Ensure files are saved
Restart Tailwind Language Server

Complete Tailwind Installation Guide

Step-by-step installation demonstration showing all three methods: CLI, PostCSS, and CDN. Includes configuration examples and editor setup.

Example CodeHTML

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Tailwind Installation Guide</title>
7    <script src="https://cdn.tailwindcss.com"></script>
8</head>
9<body class="bg-gray-50 min-h-screen py-12 px-4">
10    <div class="max-w-6xl mx-auto">
11        <!-- Header -->
12        <div class="text-center mb-12">
13            <h1 class="text-5xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent mb-4">
14                Tailwind CSS Installation
15            </h1>
16            <p class="text-xl text-gray-600">
17                Three methods to get started with Tailwind CSS
18            </p>
19        </div>
20
21        <!-- Installation Methods -->
22        <div class="grid md:grid-cols-3 gap-6 mb-12">
23            <!-- Method 1: CLI -->
24            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-500">
25                <div class="text-4xl mb-4">⚡</div>
26                <h2 class="text-2xl font-bold mb-3">Tailwind CLI</h2>
27                <p class="text-gray-600 mb-4 text-sm">
28                    Fast setup for static sites and learning
29                </p>
30                <div class="bg-gray-900 text-green-400 p-4 rounded-lg text-sm font-mono mb-4">
31                    npm install -D tailwindcss<br>
32                    npx tailwindcss init
33                </div>
34                <div class="space-y-2 text-sm">
35                    <div class="flex items-center text-green-600">
36                        <span class="mr-2">✓</span>
37                        <span>Simple setup</span>
38                    </div>
39                    <div class="flex items-center text-green-600">
40                        <span class="mr-2">✓</span>
41                        <span>Perfect for learning</span>
42                    </div>
43                    <div class="flex items-center text-green-600">
44                        <span class="mr-2">✓</span>
45                        <span>Watch mode included</span>
46                    </div>
47                </div>
48            </div>
49
50            <!-- Method 2: PostCSS -->
51            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-500">
52                <div class="text-4xl mb-4">🚀</div>
53                <h2 class="text-2xl font-bold mb-3">PostCSS</h2>
54                <p class="text-gray-600 mb-4 text-sm">
55                    Production-ready with modern tools
56                </p>
57                <div class="bg-gray-900 text-green-400 p-4 rounded-lg text-sm font-mono mb-4">
58                    npm install -D tailwindcss<br>
59                    postcss autoprefixer<br>
60                    npx tailwindcss init -p
61                </div>
62                <div class="space-y-2 text-sm">
63                    <div class="flex items-center text-green-600">
64                        <span class="mr-2">✓</span>
65                        <span>HMR support</span>
66                    </div>
67                    <div class="flex items-center text-green-600">
68                        <span class="mr-2">✓</span>
69                        <span>Framework integration</span>
70                    </div>
71                    <div class="flex items-center text-green-600">
72                        <span class="mr-2">✓</span>
73                        <span>Auto optimization</span>
74                    </div>
75                </div>
76            </div>
77
78            <!-- Method 3: CDN -->
79            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-500">
80                <div class="text-4xl mb-4">🎯</div>
81                <h2 class="text-2xl font-bold mb-3">CDN</h2>
82                <p class="text-gray-600 mb-4 text-sm">
83                    Instant prototyping (not for production)
84                </p>
85                <div class="bg-gray-900 text-green-400 p-4 rounded-lg text-sm font-mono mb-4 overflow-x-auto">
86                    &lt;script src="https://cdn<br>.tailwindcss.com"&gt;&lt;/script&gt;
87                </div>
88                <div class="space-y-2 text-sm">
89                    <div class="flex items-center text-green-600">
90                        <span class="mr-2">✓</span>
91                        <span>Zero setup</span>
92                    </div>
93                    <div class="flex items-center text-green-600">
94                        <span class="mr-2">✓</span>
95                        <span>Instant start</span>
96                    </div>
97                    <div class="flex items-center text-orange-600">
98                        <span class="mr-2">⚠</span>
99                        <span>Large file size</span>
100                    </div>
101                </div>
102            </div>
103        </div>
104
105        <!-- Configuration Example -->
106        <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
107            <h2 class="text-3xl font-bold mb-6">Configuration File</h2>
108            <p class="text-gray-600 mb-6">
109                The tailwind.config.js file controls your entire setup:
110            </p>
111
112            <div class="bg-gray-900 text-gray-100 p-6 rounded-lg font-mono text-sm overflow-x-auto mb-6">
113<span class="text-gray-500">/** @type {import('tailwindcss').Config} */</span>
114<span class="text-purple-400">module</span>.<span class="text-blue-400">exports</span> = {
115  <span class="text-green-400">content</span>: [
116    <span class="text-yellow-300">"./src/**/*.{html,js,jsx,ts,tsx}"</span>,
117  ],
118  <span class="text-green-400">theme</span>: {
119    <span class="text-green-400">extend</span>: {
120      <span class="text-green-400">colors</span>: {
121        <span class="text-green-400">brand</span>: <span class="text-yellow-300">'#3b82f6'</span>,
122      },
123    },
124  },
125  <span class="text-green-400">plugins</span>: [],
126}
127            </div>
128
129            <div class="grid md:grid-cols-2 gap-4">
130                <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
131                    <h3 class="font-bold mb-2">content []</h3>
132                    <p class="text-sm text-gray-700">
133                        Paths to scan for Tailwind classes
134                    </p>
135                </div>
136                <div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
137                    <h3 class="font-bold mb-2">theme {}</h3>
138                    <p class="text-sm text-gray-700">
139                        Customize colors, spacing, fonts
140                    </p>
141                </div>
142                <div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
143                    <h3 class="font-bold mb-2">plugins []</h3>
144                    <p class="text-sm text-gray-700">
145                        Add official or community plugins
146                    </p>
147                </div>
148                <div class="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
149                    <h3 class="font-bold mb-2">darkMode</h3>
150                    <p class="text-sm text-gray-700">
151                        Configure dark mode strategy
152                    </p>
153                </div>
154            </div>
155        </div>
156
157        <!-- Editor Setup -->
158        <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-lg p-8 text-white mb-12">
159            <h2 class="text-3xl font-bold mb-6">VS Code Extensions</h2>
160
161            <div class="grid md:grid-cols-2 gap-6">
162                <div class="bg-white/10 backdrop-blur p-6 rounded-lg">
163                    <div class="flex items-center mb-4">
164                        <div class="bg-white/20 p-2 rounded mr-3">
165                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
166                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
167                            </svg>
168                        </div>
169                        <h3 class="text-xl font-bold">Tailwind IntelliSense</h3>
170                    </div>
171                    <ul class="space-y-2 text-sm">
172                        <li>• Autocomplete class names</li>
173                        <li>• CSS preview on hover</li>
174                        <li>• Syntax highlighting</li>
175                        <li>• Linting warnings</li>
176                    </ul>
177                </div>
178
179                <div class="bg-white/10 backdrop-blur p-6 rounded-lg">
180                    <div class="flex items-center mb-4">
181                        <div class="bg-white/20 p-2 rounded mr-3">
182                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
183                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343" />
184                            </svg>
185                        </div>
186                        <h3 class="text-xl font-bold">Prettier Plugin</h3>
187                    </div>
188                    <ul class="space-y-2 text-sm">
189                        <li>• Auto-sort classes</li>
190                        <li>• Consistent ordering</li>
191                        <li>• Format on save</li>
192                        <li>• Team consistency</li>
193                    </ul>
194                </div>
195            </div>
196
197            <div class="mt-6 p-4 bg-white/10 rounded-lg">
198                <p class="text-sm">
199                    <strong>Install Command:</strong>
200                    <code class="bg-black/30 px-2 py-1 rounded ml-2">npm install -D prettier prettier-plugin-tailwindcss</code>
201                </p>
202            </div>
203        </div>
204
205        <!-- Quick Start Steps -->
206        <div class="bg-white rounded-xl shadow-lg p-8">
207            <h2 class="text-3xl font-bold mb-6 text-center">🚀 Quick Start in 5 Steps</h2>
208
209            <div class="space-y-4">
210                <div class="flex items-start">
211                    <div class="bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4 flex-shrink-0">
212                        1
213                    </div>
214                    <div>
215                        <h3 class="font-bold mb-1">Install Tailwind CSS</h3>
216                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">npm install -D tailwindcss</code>
217                    </div>
218                </div>
219
220                <div class="flex items-start">
221                    <div class="bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4 flex-shrink-0">
222                        2
223                    </div>
224                    <div>
225                        <h3 class="font-bold mb-1">Initialize configuration</h3>
226                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">npx tailwindcss init</code>
227                    </div>
228                </div>
229
230                <div class="flex items-start">
231                    <div class="bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4 flex-shrink-0">
232                        3
233                    </div>
234                    <div>
235                        <h3 class="font-bold mb-1">Configure content paths</h3>
236                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">content: ["./src/**/*.{html,js}"]</code>
237                    </div>
238                </div>
239
240                <div class="flex items-start">
241                    <div class="bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4 flex-shrink-0">
242                        4
243                    </div>
244                    <div>
245                        <h3 class="font-bold mb-1">Add Tailwind directives</h3>
246                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">@tailwind base; @tailwind components; @tailwind utilities;</code>
247                    </div>
248                </div>
249
250                <div class="flex items-start">
251                    <div class="bg-blue-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold mr-4 flex-shrink-0">
252                        5
253                    </div>
254                    <div>
255                        <h3 class="font-bold mb-1">Start using Tailwind!</h3>
256                        <code class="text-sm bg-gray-100 px-2 py-1 rounded">&lt;h1 class="text-3xl font-bold"&gt;Hello!&lt;/h1&gt;</code>
257                    </div>
258                </div>
259            </div>
260
261            <div class="mt-8 p-6 bg-green-50 border-l-4 border-green-500 rounded">
262                <p class="text-green-800 font-semibold">
263                    ✅ Setup complete! You're ready to build with Tailwind CSS.
264                </p>
265            </div>
266        </div>
267    </div>
268</body>
269</html>

How It Works

This comprehensive installation guide demonstrates all Tailwind CSS setup methods with production-ready examples.

Complete Coverage:

1. Three Installation Methods:

CLI approach for quick starts
PostCSS for production apps
CDN for prototyping

2. Configuration Deep Dive:

tailwind.config.js structure
Content path configuration
Theme customization
Plugin integration

3. Editor Setup:

Tailwind CSS IntelliSense
Prettier plugin for auto-sorting
VS Code configuration

4. Visual Learning:

Side-by-side comparison cards
Color-coded syntax examples
Step-by-step quick start guide
Real terminal commands

5. Best Practices:

When to use each method
Production vs development setup
Editor optimization tips

Key Takeaways

Three installation methods: CLI (learning), PostCSS (production), CDN (prototyping only)
tailwind.config.js content paths MUST include all files with Tailwind classes
PostCSS + Autoprefixer is the industry standard for production applications
Tailwind CSS IntelliSense and Prettier plugin are essential for productivity
Always use proper content configuration to ensure classes are generated

What's Next?

Excellent! You now have Tailwind CSS installed and configured. Your development environment is optimized with IntelliSense and auto-formatting. In the next lesson, "Utility Classes Basics," you'll start writing Tailwind code and master the core utility classes for layout, spacing, typography, and colors. Time to build!

Your progress is saved in this browser, on this device only.

Previous: Introduction to Tailwind CSS

Next: Utility Classes Basics

CSS

Installation and Configuration

Learning Objectives

Introduction

Installation Method 1: Tailwind CLI (Recommended for Learning)

Installation Method 2: PostCSS (Recommended for Production)

Installation Method 3: CDN (Quick Prototyping Only)

Configuring tailwind.config.js

PostCSS Configuration and Autoprefixer

Editor Setup: VS Code Extensions

Complete Tailwind Installation Guide

How It Works

Key Takeaways

What's Next?

Table of Contents