Building Flexbox and Grid with classes

Layout is where Tailwind’s benefit is easiest to see. You can convert mechanically from the CSS property names you already know, so there’s almost nothing new to learn.

The Flexbox lookup table

Write flex on the parent. That’s display: flex. Then add from here.

justify-content became justify-, align-items became items-. The flex in flex-start drops off too, giving the short justify-start.

The Grid lookup table

grid-cols-3 means “three equal columns” by default. It’s plain CSS’s repeat(3, 1fr), so the usual card list is covered.

The classic recipes, side by side

Header: logo left, menu right

/* plain CSS */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

<!-- Tailwind -->
<header class="flex justify-between items-center p-4">
  <p class="font-bold">Shima's page</p>
  <nav class="flex gap-4">
    <a href="#about">About</a>
    <a href="#works">Work</a>
  </nav>
</header>

A card list (three columns)

/* plain CSS */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

<!-- Tailwind -->
<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded-xl">1</div>
  <div class="p-4 bg-white rounded-xl">2</div>
  <div class="p-4 bg-white rounded-xl">3</div>
</div>

Making that one column on phones is the next lesson.

Sidebar plus content

/* plain CSS */
.layout { display: flex; gap: 1.5rem; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

<!-- Tailwind -->
<div class="flex gap-6">
  <aside class="w-60 shrink-0">Sidebar</aside>
  <main class="flex-1">Content</main>
</div>

w-60 is 240px (60 × 4) and shrink-0 means “don’t shrink”—plain CSS’s flex: 0 0 240px split across two classes.

Dead centre

/* plain CSS */
.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

<!-- Tailwind -->
<div class="grid place-items-center min-h-screen">
  <p>Centre</p>
</div>

min-h-screen is min-height: 100vh. Full screen height is h-screen or min-h-screen—both come up often enough to memorise.

Push just one item to the right

<div class="flex gap-4">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#" class="ml-auto">Log in</a>
</div>

ml-auto is margin-left: auto. The plain-CSS trick of “auto on one side pushes it away” works exactly the same here.

Width and height classes

Just the ones layout work needs.

Capping the content width and centring it—the thing every site does—is these two together.

<div class="max-w-4xl mx-auto px-4">
  content here
</div>

The same shape as plain CSS’s “max-width for the cap, margin-inline: auto for centring, padding for breathing room.”

Summary of this lesson

1. It starts by writing flex or grid—on the parent, same as plain CSS
2. justify-content became justify-, align-items became items-—just shorter
3. grid-cols-3 is three equal columns, with overflow-resistant minmax(0, 1fr) by default
4. max-w-4xl mx-auto is the go-to combination for capping and centring content
5. Small tricks like ml-auto and shrink-0 work on the same logic as plain CSS

Next we add the md: prefix to all of this and switch by screen width.