Last updated: April 12, 2026
Tailwind CSS Classes Cheatsheet
Quick Answer
Tailwind CSS uses utility classes for styling. Spacing uses p-/m- with scale (4 = 1rem). Text uses text-sm/base/lg/xl. Flex uses flex, items-center, justify-between. Colors use bg-/text- with shade (blue-500). This covers the 30 most useful patterns.
Spacing
| Command | Description |
|---|---|
| p-4 / px-4 / py-4 | Padding: all sides / horizontal / vertical (4 = 1rem) p-0 p-1 p-2 p-4 p-6 p-8 = 0 0.25 0.5 1 1.5 2rem |
| m-4 / mx-auto / my-4 | Margin: all sides / horizontal auto / vertical mx-auto centers a block element |
| space-x-4 / space-y-4 | Add space between child elements |
| gap-4 | Gap between flex/grid items (4 = 1rem) |
Sizing
| Command | Description |
|---|---|
| w-full / w-1/2 / w-64 | Width: full, half, or fixed (64 = 16rem) w-screen w-full w-auto w-fit |
| h-full / h-screen / h-64 | Height: full, viewport, or fixed |
| max-w-md / max-w-4xl / max-w-screen-xl | Maximum width constraints |
| min-h-screen | Minimum height of viewport |
Typography
| Command | Description |
|---|---|
| text-sm / text-base / text-lg / text-xl | Font size scale text-xs text-sm text-base text-lg text-xl text-2xl |
| font-bold / font-semibold / font-medium | Font weight |
| text-gray-500 / text-foreground | Text color with shade text-red-500 text-blue-600 text-green-700 |
| leading-tight / leading-relaxed | Line height (leading) |
| tracking-tight / tracking-wide | Letter spacing |
| truncate | Truncate text with ellipsis (requires block/inline-block) |
Flexbox
| Command | Description |
|---|---|
| flex / inline-flex | Create a flex container |
| flex-col / flex-row | Flex direction: column / row (default) |
| items-center | Align items on cross axis (vertically for row) |
| justify-between / justify-center | Justify content on main axis |
| flex-1 / flex-none / flex-shrink-0 | Flex grow/shrink behavior |
| flex-wrap | Allow flex items to wrap to next line |
Grid
| Command | Description |
|---|---|
| grid grid-cols-3 | Create a 3-column grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| col-span-2 | Span across 2 grid columns |
Borders
| Command | Description |
|---|---|
| rounded / rounded-lg / rounded-full | Border radius scale |
| border / border-2 / border-gray-200 | Border width and color |
| shadow / shadow-md / shadow-lg | Box shadow scale |
Colors
| Command | Description |
|---|---|
| bg-white / bg-gray-100 / bg-blue-500 | Background color |
| opacity-50 / opacity-0 | Element opacity (0-100) |
Layout
| Command | Description |
|---|---|
| hidden / block / inline / inline-block | Display property |
| relative / absolute / fixed / sticky | Position property |
Responsive
| Command | Description |
|---|---|
| sm: / md: / lg: / xl: | Responsive breakpoints (640/768/1024/1280px) text-sm md:text-base lg:text-lg |
Frequently Asked Questions
More Cheatsheets
Git Commands Cheatsheet
This cheatsheet covers the 40 most essential Git commands grouped by workflow: setup, staging, branc...
Docker Commands Cheatsheet
This cheatsheet covers 35 essential Docker commands for managing containers, images, volumes, and ne...
Linux Commands Cheatsheet
This cheatsheet covers 40 essential Linux/Unix commands for daily development: file navigation, text...
HTTP Status Codes Cheatsheet
HTTP status codes are 3-digit numbers returned by servers. 1xx = informational, 2xx = success, 3xx =...