This cheat sheet consolidates the most-used utility classes from every lesson in this course into one quick-reference page, organized by category for fast lookups while you build.
Rather than memorizing every utility, use this page as a fast lookup while building: find the category you need, copy the class pattern, and adjust the value to match your design.
class="flex items-center justify-between gap-4 p-4 rounded-lg bg-white shadow-md"A single line combining layout, spacing, color, and effect utilities from across this cheat sheet.
Layout · Flexbox & Grid · Spacing & Sizing
Typography · Colors & Backgrounds · Borders & EffectsDisplay, position, and overflow utilities.
| Class | Effect |
|---|---|
container mx-auto | Centered, breakpoint-constrained wrapper |
flex / grid | Flexbox / grid container |
hidden md:block | Responsive show/hide |
relative / absolute | Positioning context and offset positioning |
fixed / sticky | Viewport-fixed or scroll-sticky positioning |
inset-0 | Stretch to all four edges of a positioned parent |
z-10 … z-50 | Stacking order |
overflow-auto / overflow-hidden | Scroll or clip overflowing content |
Layout utilities for one- and two-dimensional arrangements.
| Class | Effect |
|---|---|
flex flex-col md:flex-row | Responsive stacked-to-row layout |
justify-between items-center | Classic navbar alignment pattern |
grid grid-cols-3 gap-4 | Three-column grid with consistent gaps |
col-span-2 | Item spans two grid columns |
flex-1 / flex-none | Item grows to fill space / stays fixed size |
flex-wrap | Allow flex items to wrap onto new lines |
Margin, padding, width, height, and gap utilities.
| Class | Effect |
|---|---|
p-4 / px-4 py-2 | Padding on all sides / axis pairs |
m-4 / mx-auto | Margin on all sides / auto-centering |
gap-4 | Spacing between flex/grid children |
w-full / max-w-md | Full width / constrained maximum width |
h-screen / min-h-screen | Full viewport height / minimum full height |
space-y-4 | Vertical spacing between stacked children |
Text, font, and color utilities.
| Class | Effect |
|---|---|
text-lg font-bold | Font size and weight |
leading-relaxed tracking-wide | Line height and letter spacing |
text-slate-900 dark:text-slate-100 | Text color with dark mode variant |
bg-blue-600 hover:bg-blue-700 | Background color with hover state |
bg-gradient-to-r from-blue-500 to-purple-600 | Two-color linear gradient |
rounded-lg shadow-md | Rounded corners with medium elevation |
Pro Tip
Bookmark this page and the official Tailwind documentation side by side, this cheat sheet covers the 80% you'll use daily, the official docs cover the remaining 20% of edge cases.
Border, radius, shadow, and transition utilities for finishing touches.
| Class | Effect |
|---|---|
border border-slate-200 | 1px light gray border |
rounded-lg / rounded-full | Soft corners / full circle or pill |
ring-2 ring-blue-500 ring-offset-2 | Accessible focus ring with offset |
shadow-md hover:shadow-xl | Elevation with hover increase |
transition-colors duration-200 | Smooth color transition |
hover:scale-105 | Slight scale-up hover effect |
backdrop-blur-md bg-white/10 | Glassmorphism frosted effect |
divide-y divide-slate-200 | Borders between stacked list items |
Frequently reused patterns for form fields, buttons, and common UI components.
| Component | Pattern |
|---|---|
| Text input | rounded-lg border border-slate-300 px-3 py-2 focus:ring-1 focus:ring-blue-500 |
| Checkbox | h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 |
| Primary button | rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 |
| Card | rounded-xl border bg-white p-6 shadow-sm |
| Navbar | flex items-center justify-between px-6 py-4 |
| Modal overlay | fixed inset-0 z-50 flex items-center justify-center bg-black/50 |
| Dropdown menu | absolute right-0 mt-2 w-48 rounded-lg border bg-white shadow-lg |
| Badge | rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs text-emerald-800 |