Quick answer: Tailwind CSS is a utility-first framework: instead of writing a class such as .card and a stylesheet to go with it, you compose small single-purpose classes such as rounded-xl, p-6 and shadow-md directly in your markup. The payoff is that styles live next to the element they affect, nothing is ever left unused in production, and you never have to invent names for things. The trade-off is longer class lists and a build step. This guide explains the idea, shows the core utilities you will use every day, and gives you a copy-paste card component.
What “utility-first” actually means
A traditional framework such as Bootstrap ships ready-made components: a button, a card, a navbar. Tailwind ships none of them. It ships hundreds of tiny utilities, each doing exactly one thing. A card becomes a list of utilities that you write yourself, which means two Tailwind sites can look completely different even though they use the same tool.
<div class="max-w-sm rounded-xl bg-white p-6 shadow-md">
<h3 class="text-lg font-semibold text-slate-900">Card title</h3>
<p class="mt-2 text-sm text-slate-600">Each class does one job.</p>
</div>Read the class list from left to right and you have the whole design: a capped width, rounded corners, white background, padding, a shadow, a bold title and a muted paragraph beneath it. Nothing is hidden in a separate CSS file.
The core utilities you will use every day
Most Tailwind code is built from a small set of families. Learn these first and you can read almost any Tailwind page.
| Family | Examples | What it controls |
|---|---|---|
| Spacing | p-4, mx-auto, gap-6 | Padding, margin and gaps on a 4px scale |
| Sizing | w-full, max-w-prose, h-12 | Width and height limits |
| Typography | text-lg, font-bold, leading-relaxed | Size, weight and line height |
| Color | bg-teal-600, text-slate-700 | Background and text colors from the palette |
| Layout | flex, grid, grid-cols-3 | How children are arranged |
| Borders and effects | rounded-lg, shadow-sm, ring-1 | Corners, elevation and outlines |
Responsive design with breakpoint prefixes
Tailwind is mobile-first. A class with no prefix applies at every width, and a prefix such as md: or lg: applies from that breakpoint upward. So grid-cols-1 md:grid-cols-3 means one column on phones and three from the medium breakpoint onward.
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<div class="rounded-lg bg-slate-100 p-4">One</div>
<div class="rounded-lg bg-slate-100 p-4">Two</div>
<div class="rounded-lg bg-slate-100 p-4">Three</div>
</div>Hover, focus and state variants
State variants work the same way as breakpoints. hover:, focus: and disabled: apply a utility only in that state, so interaction styling stays in the markup. Pair them with transition to animate the change.
<button class="rounded-md bg-teal-600 px-4 py-2 font-medium text-white transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-400 disabled:opacity-50">
Save changes
</button>Building a reusable component without losing utilities
Long class lists look messy when repeated, so the usual fix is to move them into a component. In React, Vue or a template partial, render the component once and reuse it. Avoid @apply for everyday work: it recreates the stylesheet you were trying to avoid. Reach for it only when a third-party library or a CMS field gives you no way to pass classes.
When Tailwind is the right choice
Choose Tailwind when you are building a custom design system and want full control over the look. It rewards a team that agrees on a palette and spacing scale, because those decisions live in one config file. It is a weaker fit when you want instant, opinionated components with no design work, which is where a component library such as Materialize or Bootstrap earns its keep.
A worked example: a pricing card
Real components combine every idea above. A pricing card needs a width cap, a border that highlights the recommended plan, a large price with a muted period, a list of features and a call to action that changes on hover. Build it in the order a reader scans it: the plan name first, then the price, then the features, then the button. Each step adds one layer of utilities, and you can read the finished card from top to bottom.
<div class="max-w-xs rounded-2xl border-2 border-teal-500 bg-white p-8 shadow-lg">
<p class="text-sm font-semibold uppercase tracking-wide text-teal-700">Pro</p>
<p class="mt-4 text-4xl font-bold text-slate-900">$12
<span class="text-base font-normal text-slate-500">/ month</span>
</p>
<ul class="mt-6 space-y-3 text-slate-600">
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<button class="mt-8 w-full rounded-md bg-teal-600 py-2 font-medium text-white transition hover:bg-teal-700">Start trial</button>
</div>Notice that space-y-3 spaces the list items without margin on each one, and that w-full stretches the button to the card width. Both are small choices that would each need a custom rule in plain CSS.
Frequently asked questions
Is Tailwind CSS a component library?
No. Tailwind is a utility framework. It gives you small classes to build your own components, while component libraries ship ready-made buttons and cards.
Does Tailwind make my CSS file huge?
No. Tailwind scans your templates at build time and emits only the utilities you actually use, so production stylesheets are usually small.
Can I use Tailwind without a build step?
You can, with the Play CDN, but it is meant for learning and prototyping. Use the build tool for production sites.