Tailwind CSS Cheat Sheet
Quick reference for Tailwind CSS utility classes. Spacing, colors, typography, flexbox, grid, responsive design, and dark mode — all common patterns in one page.
Spacing (margin & padding)
Layout & Display
Flexbox
Typography
Colors & Backgrounds
Borders & Rounded
Responsive & States
Spacing (margin & padding)
| p-4 / m-4 | Padding / margin on all sides (1rem / 16px) |
| px-4 / py-4 | Horizontal / vertical padding |
| mt-2 / mb-4 / ml-auto | Individual sides (top, bottom, left) |
| space-x-4 | Horizontal gap between children |
| space-y-2 | Vertical gap between children |
| p-0 / m-0 | Zero spacing |
| -mt-4 | Negative margin (pull upward) |
| Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 8, 10, 12, 16, 20, 24... | 1 unit = 0.25rem = 4px |
Layout & Display
| flex / inline-flex | Flexbox container |
| grid / inline-grid | Grid container |
| block / inline-block / hidden | Display modes |
| container mx-auto | Centered max-width container |
| w-full / h-full | Full width / height |
| w-screen / h-screen | Viewport width / height |
| min-h-screen | Minimum full viewport height |
| max-w-md / max-w-lg / max-w-xl | Max width constraints |
| overflow-hidden / overflow-auto | Overflow behavior |
Flexbox
| flex items-center justify-between | Common flex row layout |
| flex flex-col | Vertical flex direction |
| flex-wrap / flex-nowrap | Wrapping behavior |
| flex-1 / flex-auto / flex-none | Flex grow/shrink behavior |
| grow / shrink / shrink-0 | Individual grow/shrink |
| gap-4 | Gap between flex items |
| justify-center / justify-end / justify-between | Main axis alignment |
| items-start / items-center / items-end | Cross axis alignment |
| self-start / self-center / self-end | Individual item alignment |
Typography
| text-sm / text-base / text-lg / text-xl | Font size |
| font-normal / font-medium / font-semibold / font-bold | Font weight |
| text-gray-500 / text-white / text-emerald-400 | Text color |
| leading-tight / leading-relaxed | Line height |
| tracking-tight / tracking-wide | Letter spacing |
| text-left / text-center / text-right | Text alignment |
| truncate | Overflow ellipsis (single line) |
| line-clamp-3 | Limit to 3 lines with ellipsis |
| uppercase / lowercase / capitalize | Text transform |
Colors & Backgrounds
| bg-white / bg-gray-900 / bg-black | Background color |
| bg-gradient-to-r from-blue-500 to-purple-500 | Gradient background |
| bg-opacity-50 / bg-white/50 | Background opacity |
| text-white / text-gray-400 | Text color |
| border-gray-200 / border-emerald-500 | Border color |
| Color scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 | 50 = lightest, 950 = darkest |
Borders & Rounded
| border / border-2 / border-0 | Border width |
| border-t / border-b / border-l / border-r | Individual borders |
| rounded / rounded-md / rounded-lg / rounded-xl | Border radius |
| rounded-full | Fully circular |
| ring-2 ring-blue-500 | Focus ring |
| divide-y / divide-x | Dividers between children |
| shadow-sm / shadow / shadow-md / shadow-lg | Box shadow |
Responsive & States
| sm: / md: / lg: / xl: / 2xl: | Breakpoint prefixes (mobile-first) |
| sm: 640px / md: 768px / lg: 1024px / xl: 1280px | Default breakpoint values |
| hover:bg-gray-100 | Hover state |
| focus:ring-2 focus:ring-blue-500 | Focus state |
| active:bg-gray-200 | Active (pressed) state |
| dark:bg-gray-900 dark:text-white | Dark mode |
| group-hover:text-blue-500 | Style child on parent hover |
| transition-colors duration-200 | Smooth color transition |
Try It Live
Test these patterns with our free Tailwind Playground. No signup needed.
Open Tailwind Playground →