Introduction
The first time I saw a Tailwind CSS class list — something like flex items-center justify-between p-4 bg-slate-800 rounded-lg shadow-md — I genuinely thought it looked messy. Why not just write regular CSS?
Then I actually used it on a real project, and within a week I understood why so many developers (myself included now) switched permanently. You stop context-switching between HTML and a separate CSS file, you stop naming classes like .card-wrapper-inner-2, and you build UI noticeably faster.
This is the guide I wish I had when I started.
What Tailwind CSS Actually Is
Tailwind is a utility-first CSS framework. Instead of writing custom CSS classes, you compose your design directly in your HTML using small, single-purpose utility classes.
Regular CSS:
.button {
padding: 8px 16px;
background-color: #3b82f6;
border-radius: 8px;
color: white;
}
Tailwind:
<button class="px-4 py-2 bg-blue-500 rounded-lg text-white">
Click Me
</button>
Same result. No separate CSS file needed for this button.
Setting It Up (React + Vite)
npm create vite@latest my-app -- --template react
cd my-app
npm install tailwindcss @tailwindcss/vite
In vite.config.js:
import tailwindcss from '@tailwindcss/vite'
export default {
plugins: [tailwindcss()],
}
In your main CSS file:
@import "tailwindcss";
That's it — no separate config file required for modern Tailwind setups. Restart your dev server and you're ready to use utility classes anywhere.
Core Concepts You Need to Know
1. Spacing
p-4 = padding on all sides, px-4 = horizontal padding only, py-4 = vertical only, m-4 = margin. The number is a spacing scale (4 = 1rem = 16px).
2. Flexbox & Grid utilities
flex, items-center, justify-between, grid, grid-cols-3, gap-4 — everything from the Flexbox/Grid article, just as classes.
3. Responsive Design
Prefix any class with a breakpoint: md:flex-row means "apply this on medium screens and up."
<div class="flex flex-col md:flex-row gap-4">
This stacks items vertically on mobile, then switches to a row on tablets and larger.
4. Hover & State Variants
<button class="bg-blue-500 hover:bg-blue-600 transition">
hover: applies only on hover. Same pattern works for focus:, active:, disabled:.
Building Your First Component: A Pricing Card
<div class="max-w-sm mx-auto bg-slate-800 rounded-2xl p-6 shadow-lg">
<h3 class="text-xl font-bold text-white mb-2">Starter Plan</h3>
<p class="text-slate-400 mb-4">Perfect for small projects</p>
<p class="text-3xl font-bold text-white mb-6">$9<span class="text-base font-normal text-slate-400">/mo</span></p>
<button class="w-full py-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium transition">
Get Started
</button>
</div>
Notice what's happening: max-w-sm mx-auto centers and constrains the card width, rounded-2xl and shadow-lg give it depth, and everything is readable directly from the class names — no jumping to a separate file to understand the styling.
Common Beginner Mistakes
- Fighting the spacing scale. Don't reach for custom pixel values
immediately — Tailwind's default scale (4, 8, 12, 16...) covers 95%
of real use cases.
- Not using @apply for repeated patterns. If you're copy-pasting the
same 8 classes everywhere, extract them into a component instead of
a CSS class — that's the React way to do it, not @apply.
- Ignoring the official docs. Tailwind's docs (tailwindcss.com) are
genuinely excellent — searchable, example-driven, and the fastest
way to find the exact class you need.
Final Thoughts
Tailwind feels weird for about a week, then it feels like the only sane way to write CSS. The speed difference is real — I build UI noticeably faster now than when I wrote custom CSS files for every component.
Start small: rebuild one existing component using Tailwind instead of your old CSS, and see how it feels.
Muhammad Farhan is a Frontend Developer specializing in React.js and Tailwind CSS, based in Dera Ismail Khan, Pakistan.
Portfolio: muhammad-farhan-dev.github.io/muhammadfarhan.dev