Setup & Configuration
Let's get Tailwind CSS running in your project. We'll cover multiple setup methods.
Method 1: Tailwind CLI (Simplest)
For quick projects or learning, use the Tailwind CLI:
# Create project folder
mkdir my-tailwind-project
cd my-tailwind-project
# Initialize npm and install Tailwind
npm init -y
npm install -D tailwindcss
# Create config file
npx tailwindcss initCreate your CSS input file src/input.css:
@tailwind base;
@tailwind components;
@tailwind utilities;Create src/index.html:
<!DOCTYPE html>
<html>
<head>
<link href="../dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-blue-600">
Hello Tailwind!
</h1>
</body>
</html>Build your CSS:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchHello Tailwind!
Method 2: Vite + Tailwind (Recommended)
For modern projects, use Vite:
# Create Vite project
npm create vite@latest my-app -- --template vanilla
cd my-app
# Install Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pUpdate tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Add Tailwind to your CSS (src/style.css):
@tailwind base;
@tailwind components;
@tailwind utilities;Run the dev server:
npm run devThe Config File Explained
tailwind.config.js is where you customize everything:
/** @type {import('tailwindcss').Config} */
export default {
// Which files to scan for classes
content: [
"./index.html",
"./src/**/*.{js,jsx,ts,tsx}",
],
// Customize your design system
theme: {
extend: {
// Add custom colors
colors: {
'brand': '#0d9488',
'brand-light': '#5eead4',
},
// Add custom fonts
fontFamily: {
'display': ['Inter', 'sans-serif'],
},
// Add custom spacing
spacing: {
'128': '32rem',
}
},
},
// Add plugins
plugins: [],
}Now you can use your custom values:
<div class="bg-brand text-white font-display p-128">
Custom everything!
</div>VS Code Setup
Install Tailwind CSS IntelliSense extension for:
- Autocomplete: Type
bg-and see all background colors - Hover Preview: Hover over classes to see the CSS
- Linting: Catch typos and invalid classes
Settings to add in VS Code (settings.json):
{
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": true
}
}Tailwind Play (No Setup!)
For learning and prototyping, use Tailwind Play - zero setup:
👉 [play.tailwindcss.com](https://play.tailwindcss.com)
It provides an in-browser editor where you can write HTML with Tailwind classes and see instant results - perfect for experimenting!
Key Takeaways
- CLI method is great for simple projects
- Vite + Tailwind is the recommended production setup
- tailwind.config.js customizes your entire design system
- VS Code IntelliSense makes development 10x faster
- Tailwind Play is perfect for learning and sharing
Next, let's learn the spacing and sizing utilities!