Spacing & Layout
Spacing scale, border radius, breakpoints, and container widths
Spacing Scale
Based on a 4px grid (0.25rem). Use these values for padding, margin, gap, and positioning.
| Name | Pixels | Rem | Visual |
|---|---|---|---|
| 0 | 0px | 0rem | |
| px | 1px | 1px | |
| 0.5 | 2px | 0.125rem | |
| 1 | 4px | 0.25rem | |
| 1.5 | 6px | 0.375rem | |
| 2 | 8px | 0.5rem | |
| 2.5 | 10px | 0.625rem | |
| 3 | 12px | 0.75rem | |
| 3.5 | 14px | 0.875rem | |
| 4 | 16px | 1rem | |
| 5 | 20px | 1.25rem | |
| 6 | 24px | 1.5rem | |
| 7 | 28px | 1.75rem | |
| 8 | 32px | 2rem | |
| 9 | 36px | 2.25rem | |
| 10 | 40px | 2.5rem | |
| 11 | 44px | 2.75rem | |
| 12 | 48px | 3rem | |
| 14 | 56px | 3.5rem | |
| 16 | 64px | 4rem |
Note: Values from 24 to 96 are available but omitted from the visual table for brevity. Use p-24 through p-96 for larger spacing needs.
Common Patterns
Recommended spacing values for common UI patterns.
Component Spacing
px-4 py-2p-6gap-4mb-12p-8Grid & Flex Gap
gap-2gap-4gap-6gap-8gap-12Border Radius
Consistent border radius values for different UI elements.
rounded-none0px
No rounding
rounded-sm2px
Subtle rounding
rounded4px
Default rounding
rounded-md6px
Medium rounding (buttons)
rounded-lg8px
Large rounding (cards)
rounded-xl12px
Extra large rounding
rounded-2xl16px
2x large rounding
rounded-3xl24px
3x large rounding
rounded-full9999px
Fully rounded (avatars)
Breakpoints
Responsive breakpoints for adaptive layouts. Mobile-first approach.
| Prefix | Min Width | CSS | Description |
|---|---|---|---|
| sm: | 640px | @media (min-width: 640px) | Small devices (landscape phones) |
| md: | 768px | @media (min-width: 768px) | Medium devices (tablets) |
| lg: | 1024px | @media (min-width: 1024px) | Large devices (desktops) |
| xl: | 1280px | @media (min-width: 1280px) | Extra large devices |
| 2xl: | 1536px | @media (min-width: 1536px) | Extra extra large devices |
Responsive Example
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{items.map(item => <Card>{item}</Card>)}
</div>Container Widths
Max-width utilities for constraining content.
max-w-xs320pxVery narrow contentmax-w-sm384pxSmall dialogsmax-w-md448pxMedium dialogsmax-w-lg512pxLarge dialogsmax-w-xl576pxNarrow formsmax-w-2xl672pxMedium formsmax-w-3xl768pxReading contentmax-w-4xl896pxWide contentmax-w-5xl1024pxContent-focusedmax-w-6xl1152pxLarge contentmax-w-7xl1280pxStandard pageZ-Index Scale
Layering order for overlapping elements.
z-00Default layer
z-1010Slightly elevated
z-2020Dropdowns
z-3030Fixed elements
z-4040Sticky headers
z-5050Modals, dialogs
z-[100]100Toasts
z-[9999]9999Tooltips
Usage
Examples
/* Padding */
<div className="p-4">16px all sides</div>
<div className="px-6 py-4">24px horizontal, 16px vertical</div>
/* Margin */
<div className="mb-8">32px bottom margin</div>
<div className="mt-auto">Push to bottom (flexbox)</div>
/* Gap (Flexbox/Grid) */
<div className="flex gap-4">16px gap between items</div>
<div className="grid gap-6">24px grid gap</div>
/* Responsive Spacing */
<div className="p-4 md:p-6 lg:p-8">
Responsive padding
</div>
/* Container */
<div className="max-w-7xl mx-auto px-4">
Centered page content
</div>