Getting Started
Utility-First Fundamentals
The core idea of Tailwind is "utility-first": build designs by combining many small classes, each mapping to one CSS declaration.
One class, one job
Each utility sets a single property. p-4 sets padding, text-center sets text alignment, rounded-lg sets border-radius. You layer them to create the final look.
| Class | CSS it applies |
|---|---|
| p-4 | padding: 1rem |
| mt-2 | margin-top: 0.5rem |
| text-lg | font-size: 1.125rem |
| font-bold | font-weight: 700 |
| flex | display: flex |
| rounded-lg | border-radius: 0.5rem |
The spacing scale
Sizes use a numeric scale where 1 = 0.25rem (4px). So p-2 is 8px, p-4 is 16px, p-8 is 32px. The same scale powers padding, margin, width, height and gap — which is what keeps spacing consistent.
Example
<span class="inline-flex items-center gap-1 bg-emerald-100 text-emerald-800 text-sm font-semibold px-3 py-1 rounded-full">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
Verified
</span>💡
Read classes left to right as a sentence: "inline-flex, items-center, gap-1, background emerald-100…". Once you learn the vocabulary, you can build almost anything without leaving your HTML.