Tailwind CSS Cheat Sheet Complete Utility Class Reference
The ultimate Tailwind CSS cheat sheet for 2026. Every utility class organized by category with CSS equivalents and practical descriptions. Bookmark this page for instant reference while building with Tailwind CSS.
Categories
[L] Layout
| Class | CSS | Description |
|---|---|---|
flex | display: flex | Flex container |
grid | display: grid | Grid container |
block | display: block | Block element |
inline-flex | display: inline-flex | Inline flex |
hidden | display: none | Hide element |
relative | position: relative | Relative position |
absolute | position: absolute | Absolute position |
fixed | position: fixed | Fixed position |
sticky | position: sticky | Sticky position |
container | width: 100%; max-width: responsive breakpoints | Responsive container |
[F] Flexbox
| Class | CSS | Description |
|---|---|---|
flex-row | flex-direction: row | Horizontal direction |
flex-col | flex-direction: column | Vertical direction |
justify-center | justify-content: center | Center main axis |
justify-between | justify-content: space-between | Space between items |
items-center | align-items: center | Center cross axis |
items-start | align-items: flex-start | Align to start |
flex-wrap | flex-wrap: wrap | Allow wrapping |
gap-4 | gap: 1rem | 16px gap between items |
flex-1 | flex: 1 1 0% | Grow and shrink equally |
flex-none | flex: none | No grow or shrink |
[S] Spacing
| Class | CSS | Description |
|---|---|---|
p-4 | padding: 1rem | 16px all sides |
px-6 | padding-left/right: 1.5rem | 24px horizontal |
py-3 | padding-top/bottom: 0.75rem | 12px vertical |
pt-8 | padding-top: 2rem | 32px top |
m-4 | margin: 1rem | 16px margin all sides |
mx-auto | margin-left/right: auto | Center horizontally |
mt-6 | margin-top: 1.5rem | 24px top margin |
mb-4 | margin-bottom: 1rem | 16px bottom margin |
space-x-4 | margin-inline-start: 1rem (siblings) | Horizontal child spacing |
space-y-2 | margin-top: 0.5rem (siblings) | Vertical child spacing |
[T] Typography
| Class | CSS | Description |
|---|---|---|
text-sm | font-size: 0.875rem | Small text |
text-base | font-size: 1rem | Base text |
text-lg | font-size: 1.125rem | Large text |
text-xl | font-size: 1.25rem | Extra large |
text-2xl | font-size: 1.5rem | 2x large |
text-3xl | font-size: 1.875rem | 3x large |
font-bold | font-weight: 700 | Bold text |
font-semibold | font-weight: 600 | Semi-bold text |
font-medium | font-weight: 500 | Medium weight |
leading-relaxed | line-height: 1.625 | Relaxed line height |
text-center | text-align: center | Center text |
uppercase | text-transform: uppercase | Uppercase text |
tracking-wide | letter-spacing: 0.025em | Wide letter spacing |
[C] Colors
| Class | CSS | Description |
|---|---|---|
text-white | color: #ffffff | White text |
text-gray-500 | color: #6a7282 | Medium gray text |
text-blue-500 | color: #2b7fff | Blue text |
bg-white | background-color: #ffffff | White background |
bg-gray-100 | background-color: #f3f4f6 | Light gray bg |
bg-blue-500 | background-color: #2b7fff | Blue background |
border-gray-200 | border-color: #e5e7eb | Gray border |
bg-gradient-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)) | Gradient right |
[Z] Sizing
[B] Borders & Shadows
| Class | CSS | Description |
|---|---|---|
border | border-width: 1px | Default border |
border-2 | border-width: 2px | 2px border |
rounded | border-radius: 0.25rem | Small radius |
rounded-lg | border-radius: 0.5rem | Large radius |
rounded-full | border-radius: 9999px | Circle/pill |
shadow-sm | box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) | Small shadow |
shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | Medium shadow |
shadow-lg | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | Large shadow |
shadow-xl | box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) | XL shadow |
[E] Effects & Transitions
| Class | CSS | Description |
|---|---|---|
opacity-50 | opacity: 0.5 | 50% opacity |
transition | transition-property: color, background-color, border-color, opacity, transform | Transition common properties |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke | Color transitions |
duration-300 | transition-duration: 300ms | 300ms duration |
hover:bg-blue-600 | on hover: background-color #155dfc | Hover background |
focus:ring-2 | on focus: ring width 2px | Focus ring |
transform | transform: enabled | Enable transforms |
scale-105 | scale: 1.05 | 105% scale |
Responsive Breakpoints
Tailwind CSS uses mobile-first responsive prefixes. Add these prefixes before any utility class to apply it at a specific breakpoint and above.
| Prefix | Min Width | CSS | Example |
|---|---|---|---|
sm: | 640px | @media (min-width: 640px) | sm:flex |
md: | 768px | @media (min-width: 768px) | md:grid-cols-2 |
lg: | 1024px | @media (min-width: 1024px) | lg:text-xl |
xl: | 1280px | @media (min-width: 1280px) | xl:grid-cols-4 |
2xl: | 1536px | @media (min-width: 1536px) | 2xl:max-w-8xl |
Frequently Asked Questions
A Tailwind CSS cheat sheet is a quick reference guide that organizes all Tailwind CSS utility classes by category for fast lookup. Instead of searching documentation, developers use cheat sheets to quickly find the correct class name for spacing, typography, colors, layout, and other CSS properties.
Tailwind CSS v4 generates thousands of utility classes covering every CSS property. The core framework includes classes for spacing (padding, margin), typography (font size, weight, line height), colors (text, background, border), layout (flex, grid, position), sizing (width, height), borders, shadows, transitions, and responsive variants.
Tailwind CSS uses a consistent spacing scale where each unit equals 4px (0.25rem). Common values: p-1 (4px), p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px), p-12 (48px), p-16 (64px). The same scale applies to margin (m-), gap (gap-), width (w-), and height (h-) utilities.
Tailwind CSS uses mobile-first responsive prefixes: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+), and 2xl: (1536px+). Apply any utility at a specific breakpoint by adding the prefix. Example: md:flex-row makes an element flex-row on medium screens and above while remaining the default on smaller screens.
Tailwind CSS uses a color-shade naming pattern: {color}-{shade}. Colors include slate, gray, zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Shades range from 50 (lightest) to 950 (darkest) in increments of 50 and 100.