Utility Classes Reference
The Tailwind classes you will use every single day — grouped by what they do
The 80/20 Rule of Tailwind
There are hundreds of Tailwind utility classes. You will use about 30 of them for 80% of everything you build. This page covers those 30. Bookmark it. Return to it whenever you're building.
The rest you look up on tailwindcss.com/docs when you need them — you do not need to memorise the entire library.
Spacing — Padding and Margin
Spacing is the single most impactful thing you can adjust to make a layout feel professional. Crowded = cheap. Breathing room = premium.
The Spacing Scale
All spacing classes use the same scale: 1 unit = 4px.
| Class | Value | Use for |
|---|---|---|
p-1 | 4px all sides | Tight/compact elements |
p-2 | 8px all sides | Small padding inside buttons |
p-3 | 12px all sides | Moderate padding |
p-4 | 16px all sides | Standard card padding |
p-6 | 24px all sides | Comfortable section padding |
p-8 | 32px all sides | Generous section padding |
p-12 | 48px all sides | Large section spacing |
Directional Padding
Margin
Margin works the same way but creates space outside the element:
Gap — Space Between Children
When using flex or grid, gap adds space between child elements:
Prefer gap over margin on children. When you have a list of items in a flex or grid container, use gap on the parent rather than mb-4 on each child. It's cleaner and doesn't leave extra space after the last item.
Sizing — Width and Height
Width
Height
Typography — Text Styling
Font Size
Font Weight
Text Color
Text Alignment and Transform
Colors — Background and Border
Background Colors
Border Colors
Box Shadow
Flexbox — Side-by-Side Layouts
Flexbox is how you place items next to each other (horizontally) or stack them (vertically).
Alignment Reference
| Class | Effect |
|---|---|
items-start | Align items to top of container |
items-center | Align items to vertical middle |
items-end | Align items to bottom |
justify-start | Pack items to the left |
justify-center | Center items horizontally |
justify-end | Pack items to the right |
justify-between | First item left, last item right, space between |
justify-around | Equal space around each item |
Grid — Column Layouts
Grid is for structured, column-based layouts:
Position and Display
Putting It Together — A Real Example
Here's a simple stat card like you'd see in an admin dashboard — built entirely with utility classes:
Reading the classes on the container: white background, light gray border, large rounded corners, subtle shadow, 24px padding on all sides.
Reading the title: small text, medium weight, gray, all-caps, slightly wider letter spacing.
Every decision is visible. No CSS file to open. No class names to invent.
The next step: Now that you know the classes, use shadcn/ui for components that are more complex — buttons with hover states, inputs with focus rings, dialogs, dropdowns. You don't hand-build those from scratch. You use the pre-built components and add Tailwind classes when you need to customise.