Chapters
Crash Course: Tailwind CSS Essentials — Learn Utility-First Styling Fast
📘 Chapter 2: Setting Up Tailwind CSS in Your Project
🧭 What You’ll Learn
By the end of this chapter, you’ll be able to:
- Set
up Tailwind CSS via different methods (CDN, CLI, Frameworks)
- Configure
your development environment
- Customize
the Tailwind configuration (tailwind.config.js)
- Understand
the role of @tailwind directives in CSS
- Integrate
Tailwind with Vite, Vue, React, and other frameworks
- Enable
production optimization (purging unused CSS)
- Troubleshoot
common setup issues
⚙️ Tailwind CSS Setup Overview
Tailwind CSS can be used in several different ways,
depending on the complexity of your project:
|
Setup Method |
Best For |
Customization |
Performance |
|
CDN |
Quick prototyping,
HTML-only files |
❌ No |
🚫 Unoptimized |
|
Tailwind CLI |
Static sites,
small apps |
✅
Yes |
✅
Optimized |
|
PostCSS/Webpack |
Advanced projects,
full control |
✅ Full |
✅ High |
|
Frameworks |
Vue, React,
Svelte integrations |
✅
Yes |
✅
Best |
🔹 Option 1: Using
Tailwind via CDN (Fastest Way)
This is the quickest way to try Tailwind—no build tools
required.
💡 Use for: Prototypes,
CodePens, HTML demos
Code:
html
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<title>Tailwind CDN
Example</title>
<script
src="https://cdn.tailwindcss.com"></script>
</head>
<body
class="bg-gray-100 p-8">
<h1 class="text-3xl font-bold
text-blue-600">Hello Tailwind!</h1>
</body>
</html>
⚠️ Limitations: No
configuration, larger file size, no purge or plugins.
🔹 Option 2: Installing
Tailwind via CLI (Recommended)
✅ Steps for Standalone HTML +
Tailwind project
Step 1: Create Project
bash
mkdir
tailwind-project
cd
tailwind-project
npm
init -y
Step 2: Install Tailwind
bash
npm
install -D tailwindcss
npx
tailwindcss init
You’ll now have a tailwind.config.js file.
Step 3: Create CSS Entry File
src/input.css
css
@tailwind
base;
@tailwind
components;
@tailwind
utilities;
Step 4: Build Tailwind CSS
bash
npx
tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Step 5: Connect in HTML
index.html
html
<link
rel="stylesheet" href="dist/output.css">
🔹 Option 3: Using
Tailwind with Vite (Fastest Modern Setup)
Vite is the recommended bundler for Vue 3, React, and
general frontend apps.
Step 1: Scaffold App
bash
npm
create vite@latest my-app
cd
my-app
npm
install
Step 2: Install Tailwind CSS
bash
npm
install -D tailwindcss postcss autoprefixer
npx
tailwindcss init -p
This creates both tailwind.config.js and postcss.config.js.
Step 3: Create CSS File
src/index.css
css
@tailwind
base;
@tailwind
components;
@tailwind
utilities;
Step 4: Import CSS in main.js
js
import
'./index.css'
Start the dev server:
bash
npm
run dev
🛠️ tailwind.config.js
Breakdown
js
module.exports
= {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue}"
],
theme: {
extend: {
colors: {
brand: '#1e40af'
}
}
},
plugins: []
}
🔑 Important Keys:
|
Key |
Purpose |
|
content |
Determines which files
to scan for class usage |
|
theme |
Customize
colors, fonts, spacing, breakpoints |
|
extend |
Add to existing
Tailwind design system |
|
plugins |
Add Tailwind
plugins like forms, typography |
📦 Using Tailwind with Vue
bash
npm
install -D tailwindcss postcss autoprefixer
npx
tailwindcss init -p
Then, import Tailwind in main.js:
js
import
'./assets/tailwind.css'
Tailwind will auto-purge unused styles in production if mode
is set to 'production'.
📦 Using Tailwind with
React
Follow the same setup as Vite, and import your CSS in
main.jsx:
jsx
import
'./index.css'
🔍 Using @apply in Custom
CSS
You can extract repeated class patterns into your CSS:
css
.btn
{
@apply px-4 py-2 bg-blue-600 text-white
rounded;
}
Then use it in HTML:
html
<button
class="btn">Save</button>
Note: Works only in .css files processed by
Tailwind/PostCSS.
⚡ Enable Dark Mode
In tailwind.config.js:
js
darkMode:
'class',
Use like:
html
<body
class="dark:bg-gray-900 dark:text-white">
Toggle via JS:
js
document.body.classList.toggle('dark');
🧼 Production Build with
Purge
Tailwind removes all unused CSS based on your content paths.
Build for production:
bash
npx
tailwindcss -i ./src/input.css -o ./dist/output.css --minify
This keeps only used utility classes, reducing CSS from 3MB
→ ~20KB.
📊 Setup Options
Comparison Table
|
Setup |
Configurable |
Purges Unused CSS |
Best For |
|
CDN |
❌ No |
❌ No |
Quick demos, small
HTML files |
|
CLI |
✅
Yes |
✅
Yes |
Custom
HTML/CSS setups |
|
Vite/Framework |
✅ Full |
✅ Yes |
SPAs with
Vue/React/Svelte |
|
Webpack |
✅
Full |
✅
Yes |
Enterprise-scale
apps |
📚 Suggested File
Structure (CLI/Vite)
bash
my-project/
├── dist/
│ └── output.css
├── src/
│ ├──
input.css
│ └── main.js
├── index.html
├── tailwind.config.js
└── postcss.config.js
🧠 Troubleshooting Common
Issues
|
Issue |
Fix |
|
Classes not applied |
Check content paths in
tailwind.config.js |
|
Output file too large |
Ensure
purge/minify is enabled in production |
|
Dark mode not
working |
Add darkMode: 'class'
and toggle dark class |
|
Build command fails |
Reinstall
dependencies, check paths, use --watch |
|
CSS not updating in
dev server |
Restart dev server or
check input/output path config |
✅ Summary
You’ve now learned:
- How
to install Tailwind CSS using different methods
- How
to configure your tailwind.config.js for customization
- How
to integrate Tailwind with modern tools (Vite, Vue, React)
- How
to build and optimize CSS for production
In the next chapter, you’ll explore Tailwind’s core
utility classes—layout, spacing, typography, and more.
FAQs
❓1. What is Tailwind CSS, and how is it different from Bootstrap?
Answer:
Tailwind CSS is a utility-first CSS framework that provides low-level
utility classes (like p-4, bg-blue-500, etc.) to build designs directly in your
HTML. Unlike Bootstrap, it doesn't offer pre-designed components—giving you full
design control and less opinionated styling.
❓2. Do I need to learn traditional CSS before using Tailwind?
Answer:
It’s helpful but not required. Tailwind abstracts much of the traditional CSS
syntax into class utilities. However, understanding how CSS works (box model,
flexbox, etc.) will make you far more effective with Tailwind.
❓3. Does using so many utility classes in HTML make my code messy?
Answer:
At first, it may seem cluttered, but Tailwind encourages component-based
design. In frameworks like Vue or React, you can extract reusable
components and even define utility groups using @apply in .css files for
cleaner markup.
❓4. How do I customize Tailwind’s default design (colors, fonts, spacing)?
Answer:
You can override or extend Tailwind’s design system by modifying the
tailwind.config.js file. You can define your own color palette, breakpoints,
font families, and more under the theme.extend object.
❓5. Is Tailwind good for responsive design?
Answer:
Yes, Tailwind is built with mobile-first responsive design in mind. You
can easily apply different styles at various breakpoints using prefixes like
sm:, md:, lg:, xl:, and 2xl:.
❓6. How can I use Tailwind in a production project?
Answer:
Use the CLI or PostCSS setup to build Tailwind with your source files. Enable purge
(now content in Tailwind v3+) to remove unused CSS and keep your final build
lightweight. Tailwind is production-ready and widely used in real-world apps.
❓7. Can I use Tailwind with React, Vue, or Angular?
Answer:
Absolutely. Tailwind integrates seamlessly with React, Vue, Angular,
Svelte, and other frontend frameworks. Simply install it as part of your build
process and apply classes in your component templates.
❓8. How do I enable dark mode with Tailwind?
Answer:
In tailwind.config.js, set darkMode: 'class'. Then toggle a dark class on the
<html> or <body> element to switch themes. Tailwind provides dark:
variants for any utility (e.g., dark:bg-gray-900).
❓9. Is Tailwind SEO-friendly?
Answer:
Yes. Tailwind only affects styling, not content structure. As long as you write
semantic HTML and manage content correctly, your site remains SEO-friendly.
Just ensure your site loads fast and is accessible.
❓10. Can I combine Tailwind with custom CSS?
Answer:
Yes. You can use Tailwind alongside your own CSS rules. You can also use the
@apply directive in your CSS to combine Tailwind utilities into custom class
names for reuse and clarity.
Comments(1)