CSS Guide
What Is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that lets you style elements directly in your HTML. Here's what makes it popular and how it changes the way you write CSS.
Quick answer: Tailwind CSS gives you hundreds of small utility classes (flex, p-4, bg-blue-500) that you compose directly in your HTML. Instead of writing custom CSS, you combine utilities to build any design.
💡 Why Tailwind Matters
- No naming decisions. Forget inventing class names like
.hero-card-inner-title. - Consistent spacing and colors. Every value comes from a scale — no more magic numbers.
- Ship small CSS. Unused utilities are stripped out at build time.
- Responsive by default.
md:flex,lg:grid-cols-3— no media queries needed. - Works with any framework. Next.js, React, Vue, Svelte, Astro, plain HTML.
⚖️ Traditional CSS vs Tailwind
Same card, two approaches:
Traditional CSS:
/* style.css */
.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-width: 400px;
}
.card h2 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
}<!-- HTML -->
<div class="card">
<h2>Hello</h2>
</div>Tailwind CSS:
<div class="bg-white rounded-xl p-6 shadow-lg max-w-md">
<h2 class="text-xl font-bold mb-2">Hello</h2>
</div>No separate CSS file. Everything is visible at the point of use.
🧩 Common Tailwind Classes
/* Layout */
flex, grid, block, hidden
/* Spacing */
p-4 padding: 1rem
px-6 padding left+right: 1.5rem
mt-8 margin top: 2rem
gap-4 gap between flex/grid items
/* Sizing */
w-full width: 100%
max-w-md max-width: 28rem
h-screen height: 100vh
/* Typography */
text-xl font-size: 1.25rem
font-bold font-weight: 700
text-slate-600
/* Colors */
bg-blue-500
text-white
border-slate-200
/* Borders & shadows */
rounded-lg
border
shadow-md
/* Responsive */
md:flex flex on screens >= 768px
lg:grid-cols-3Try It Instantly with CDN
For learning, add one script tag to any HTML file:
<script src="https://cdn.tailwindcss.com"></script>Now every Tailwind class works. This is great for prototyping.
💡 Don't use the CDN in production. It ships the entire framework (~3MB). For real projects, install Tailwind via npm so it only includes the classes you use.
Install for a Real Project
In a Node.js project, install Tailwind properly:
npm install -D tailwindcss
npx tailwindcss initThen add the directives to your CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;Finally, run the build to generate your CSS:
npx tailwindcss -i ./input.css -o ./output.css --watchUse It in Frameworks
Tailwind has first-class support for every modern framework:
- Next.js:
npx create-next-app@latest— Tailwind is offered during setup - Vite + React:
npm install -D tailwindcss postcss autoprefixer - Astro:
npx astro add tailwind
🚫 Common Beginner Mistakes
- Using the CDN in production. It's fine for learning, terrible for shipping.
- Fighting with long class strings. That's normal at first. Use the
@applydirective to extract repeated patterns. - Skipping CSS fundamentals. Tailwind doesn't teach you CSS — it speeds up applying it. Learn flexbox and grid first.
- Not using the docs. The Tailwind docs (tailwindcss.com/docs) are the best in the industry. Bookmark them.
- Writing custom CSS alongside Tailwind unnecessarily. Try to solve everything with utilities first.
❓ Frequently Asked Questions
What is Tailwind CSS?
A utility-first CSS framework. You compose small classes in your HTML instead of writing custom CSS rules.
Is Tailwind better than custom CSS?
Tailwind is faster to build with and enforces consistency. Custom CSS is better for highly unique or animation-heavy designs. Most modern projects use Tailwind.
Do I need to know CSS first?
Yes. Tailwind uses CSS properties under the hood. Learn flexbox, grid, and box model before Tailwind.
Does Tailwind make HTML messy?
It can look verbose at first. But it removes the need to invent class names and jump between files. Most developers find it faster once they adapt.
Is Tailwind free?
Yes. Open source and free for personal and commercial use.