Layout

Spacing and Layout

Master Tailwind's spacing scale, flexbox, and grid utilities for perfect layouts.

Spacing Scale

Tailwind uses a base-4 spacing scale (1 unit = 0.25rem = 4px):

ClassValue
p-14px
p-28px
p-416px
p-624px
p-832px
p-1248px
p-1664px

Flexbox

Tailwind provides intuitive flex utilities:

  • flex, inline-flex
  • flex-row, flex-col
  • justify-start/center/end/between/around/evenly
  • items-start/center/end/stretch
  • flex-wrap, flex-1, flex-none

Grid

  • grid, grid-cols-{n}
  • col-span-{n}
  • gap-{n}

Example

html
<!-- Flexbox layouts -->
<div class="flex items-center justify-between p-4">
  <span class="font-bold">Logo</span>
  <nav class="flex gap-4">
    <a href="#" class="hover:text-blue-500">Home</a>
    <a href="#" class="hover:text-blue-500">About</a>
  </nav>
</div>

<!-- Centered content -->
<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">Perfectly centered!</div>
</div>

<!-- Card with flex column -->
<div class="flex flex-col h-64 bg-white rounded-lg shadow p-6">
  <h3 class="text-lg font-semibold">Card</h3>
  <p class="text-gray-600 flex-1">Content that grows</p>
  <button class="mt-auto bg-blue-500 text-white py-2 rounded">Action</button>
</div>

<!-- Grid layout -->
<div class="grid grid-cols-12 gap-6">
  <aside class="col-span-3 bg-gray-100 p-4 rounded">Sidebar</aside>
  <main class="col-span-9 bg-white p-4 rounded shadow">Main content</main>
</div>

<!-- Auto-fit grid -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
  <div class="bg-white rounded p-4 shadow">Item 1</div>
  <div class="bg-white rounded p-4 shadow">Item 2</div>
  <div class="bg-white rounded p-4 shadow">Item 3</div>
</div>
Try it yourself — HTML