Installation & Setup Guide
There are multiple ways to integrate Tailwind CSS into your project, depending on your build environment and stack.
1. Quick Play CDN (For Prototyping)
The fastest way to test Tailwind CSS without any build step is by using the Play CDN script tag in your HTML header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind Play CDN</title>
</head>
<body className="bg-gray-100 flex items-center justify-center h-screen">
<h1 className="text-3xl font-bold text-blue-600 underline">
Hello Tailwind CSS!
</h1>
</body>
</html>Note: The Play CDN is meant for testing and development only. Do not use Play CDN in production because it downloads the entire unpurged CSS compiler in the browser.
2. Tailwind CLI (Standalone Production Setup)
The standalone Tailwind CLI is the simplest build tool setup when you are building plain HTML/JS websites or static templates.
Step 1: Install Tailwind via npm
npm install -D tailwindcss
Step 2: Initialize Configuration File
npx tailwindcss init
Step 3: Configure Template Paths in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Step 4: Add Tailwind Directives to CSS (src/input.css)
@tailwind base; @tailwind components; @tailwind utilities;
Step 5: Run Build Watcher
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
3. Next.js Integration
Setting up Tailwind CSS in a Next.js project is effortless:
# 1. Create Next.js app with Tailwind (Automatic) npx create-next-app@latest my-app --tailwind # 2. Or manual installation: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Update tailwind.config.js content array:
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],4. Vite (React / Vue) Integration
# Install Vite + Tailwind npm create vite@latest my-project -- --template react cd my-project npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Next Up
Master the core concepts of Utility-First CSS and component extraction.
Next Lesson: Utility-First Concept →
