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
<!-- Padding: all sides, x-axis, y-axis, individual -->
<div class="p-4">All sides: 1rem</div>
<div class="px-6 py-3">Horizontal 1.5rem, vertical 0.75rem</div>
<div class="pt-8 pb-4 pl-6 pr-6">Individual sides</div>
<!-- Margin: same syntax as padding, plus auto and negative -->
<div class="mx-auto mt-8">Centered with top margin</div>
<div class="-mt-4">Negative top margin (pulls up)</div>Space Between
Use space-x-* or space-y-* to add consistent spacing between child elements without adding classes to each one:
<div class="flex space-x-4">
<button class="px-4 py-2 bg-gray-200 rounded">Draft</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded">Publish</button>
<button class="px-4 py-2 bg-gray-200 rounded">Cancel</button>
</div>Width & Height
<!-- Fixed widths -->
<div class="w-64">16rem wide</div>
<div class="w-full">100% wide</div>
<div class="w-screen">100vw wide</div>
<div class="w-fit">Shrinks to content</div>
<!-- Max and min widths -->
<div class="max-w-lg mx-auto">Capped at 32rem, centered</div>
<div class="min-w-0">Allows shrinking below content size (useful in flex)</div>
<!-- Heights -->
<div class="h-screen">Full viewport height</div>
<div class="min-h-screen flex flex-col">
<header class="h-16">Fixed header</header>
<main class="flex-1">Fills remaining space</main>
</div>Flexbox Layout
Tailwind makes flexbox layouts trivial:
<!-- Horizontal centering -->
<div class="flex items-center justify-center h-64 bg-gray-100">
<p>Perfectly centered</p>
</div>
<!-- Navbar pattern -->
<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
<a href="/" class="text-xl font-bold">Logo</a>
<div class="flex items-center gap-6">
<a href="/about" class="text-gray-700 hover:text-black">About</a>
<a href="/blog" class="text-gray-700 hover:text-black">Blog</a>
<button class="px-4 py-2 bg-blue-600 text-white rounded">Sign In</button>
</div>
</nav>
<!-- Wrapping flex with gap -->
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1 bg-gray-200 rounded-full text-sm">React</span>
<span class="px-3 py-1 bg-gray-200 rounded-full text-sm">TypeScript</span>
<span class="px-3 py-1 bg-gray-200 rounded-full text-sm">Tailwind</span>
<span class="px-3 py-1 bg-gray-200 rounded-full text-sm">Next.js</span>
</div>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:
<!-- Basic responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-lg shadow">Feature 1</div>
<div class="bg-white p-6 rounded-lg shadow">Feature 2</div>
<div class="bg-white p-6 rounded-lg shadow">Feature 3</div>
</div>
<!-- Dashboard layout with sidebar -->
<div class="grid grid-cols-[250px_1fr] min-h-screen">
<aside class="bg-gray-900 text-white p-6">
<nav class="space-y-2">
<a href="#" class="block px-3 py-2 rounded bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded hover:bg-gray-800">Settings</a>
</nav>
</aside>
<main class="p-8 bg-gray-50">
<h1 class="text-2xl font-bold">Dashboard</h1>
</main>
</div>
<!-- Spanning columns -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-4 bg-blue-100 p-4 rounded">Full-width header</div>
<div class="col-span-1 bg-gray-100 p-4 rounded">Sidebar</div>
<div class="col-span-3 bg-gray-100 p-4 rounded">Main content</div>
</div>Practical Example: Pricing Card
Combining layout and spacing into a real component:
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
<div class="px-6 py-8 text-center">
<h3 class="text-lg font-semibold text-gray-900">Pro Plan</h3>
<p class="mt-2 text-sm text-gray-500">For growing teams</p>
<p class="mt-6">
<span class="text-4xl font-bold text-gray-900">$29</span>
<span class="text-gray-500">/month</span>
</p>
</div>
<div class="px-6 pb-8">
<ul class="space-y-3 text-sm text-gray-600">
<li class="flex items-center gap-2">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
</svg>
Unlimited projects
</li>
<li class="flex items-center gap-2">
<svg class="w-5 h-5 text-green-500 shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
</svg>
Priority support
</li>
</ul>
<button class="mt-8 w-full py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700">
Get Started
</button>
</div>
</div>