Good layout is the foundation of every UI. Tailwind gives you a complete set of utilities for controlling size, spacing, and arrangement without writing a single line of custom CSS.
Container
The container class sets max-width to match the current breakpoint. Pair it with mx-auto and horizontal padding for a standard page wrapper:
<div class="container mx-auto px-4 lg:px-8">
<!-- Page content -->
</div>You can configure the container to auto-center and add default padding in your Tailwind config so you only need class="container".
Spacing Scale
Tailwind's spacing scale is used by padding (p), margin (m), gap (gap), and space-between (space-x/y) utilities. The default scale maps numbers to rem values:
| Class | Value |
|---|---|
0 | 0 |
1 | 0.25rem (4px) |
2 | 0.5rem (8px) |
4 | 1rem (16px) |
6 | 1.5rem (24px) |
8 | 2rem (32px) |
12 | 3rem (48px) |
16 | 4rem (64px) |
Padding & Margin
Space Between
Use space-x-* or space-y-* to add consistent spacing between child elements without adding classes to each one:
Width & Height
Flexbox Layout
Tailwind makes flexbox layouts trivial:
Key flex utilities: flex, flex-col, flex-wrap, items-center, items-start, items-end, justify-between, justify-center, gap-*, flex-1, shrink-0, grow.
CSS Grid Layout
Grid is the right tool for two-dimensional layouts:
Practical Example: Pricing Card
Combining layout and spacing into a real component: