TailwindでFlexboxを使うにはどう書きますか？

親に flex と書くだけです。display: flex がそのクラス1つに対応しています。あとは justify-center や items-center のように、CSSのプロパティ名から先頭部分を取ったクラスを足していきます。

justify-centerとitems-centerはどちらがどちらですか？

素のCSSと同じ関係です。justify-は並べている方向、items-はそれと直角の方向。横並び（既定）なら justify- が横、items- が縦を受け持ちます。名前が短くなっただけで考え方は変わりません。

Gridの列数はどう指定しますか？

grid grid-cols-3 のように書きます。grid が display: grid、grid-cols-3 が grid-template-columns: repeat(3, minmax(0, 1fr)) にあたります。1frの均等割りが既定なので、よくある使い方はこれだけで足ります。

gapはどこに書きますか？

素のCSSと同じで、親に書きます。gap-4 で16px相当。gap-x-4 と gap-y-2 のように縦横を分けることもできます。

TailwindでFlexbox・Gridを書く - justify-center・grid-cols-3の対応表と定番レイアウト

レイアウトは、Tailwindの恩恵がいちばん分かりやすいところです。CSSで覚えたプロパティ名から機械的に変換できるので、新しく覚えることはほとんどありません。

べんりワザFlexboxチートシートFlexboxそのものの復習は、動くデモつきの早見表へ

Flexboxの対応表

まず親にflexと書く。これでdisplay: flexです。あとは足していきます。

Tailwind	素のCSS
`flex`	`display: flex`
`flex-col`	`flex-direction: column`
`flex-row-reverse`	`flex-direction: row-reverse`
`flex-wrap`	`flex-wrap: wrap`
`justify-start`	`justify-content: flex-start`
`justify-center`	`justify-content: center`
`justify-end`	`justify-content: flex-end`
`justify-between`	`justify-content: space-between`
`justify-around`	`justify-content: space-around`
`justify-evenly`	`justify-content: space-evenly`
`items-start`	`align-items: flex-start`
`items-center`	`align-items: center`
`items-end`	`align-items: flex-end`
`items-stretch`	`align-items: stretch`
`gap-4`	`gap: 1rem`
`flex-1`	`flex: 1 1 0%`
`shrink-0`	`flex-shrink: 0`
`self-end`	`align-self: flex-end`
`order-first`	`order: -9999`

justify-contentがjustify-、align-itemsがitems-になっただけです。flex-とflex-startのflexが落ちるので、justify-startのように短くなります。

Gridの対応表

Tailwind	素のCSS
`grid`	`display: grid`
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr))`
`grid-cols-none`	`grid-template-columns: none`
`grid-rows-2`	`grid-template-rows: repeat(2, minmax(0, 1fr))`
`col-span-2`	`grid-column: span 2 / span 2`
`col-span-full`	`grid-column: 1 / -1`
`row-span-2`	`grid-row: span 2 / span 2`
`gap-4`	`gap: 1rem`
`gap-x-4` / `gap-y-2`	`column-gap` / `row-gap`
`place-items-center`	`place-items: center`

grid-cols-3は「3列の均等割り」が既定です。素のCSSのrepeat(3, 1fr)にあたるので、よくあるカード一覧はこれで足ります。

べんりワザCSS GridチートシートGridそのものの復習は、動くデモつきの早見表へ

定番レシピを書き比べる

左にロゴ・右にメニューのヘッダー

/* 素の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">しまちゃんのページ</p>
  <nav class="flex gap-4">
    <a href="#about">じこしょうかい</a>
    <a href="#works">つくったもの</a>
  </nav>
</header>

flex justify-between items-center——この3つだけでヘッダーの骨格が決まります。

カード一覧（3列）

/* 素の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>

スマホでは1列にしたい——そのための書き方は次の回で扱います。

サイドバー＋本文

/* 素の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">サイドバー</aside>
  <main class="flex-1">本文</main>
</div>

w-60が240px（60×4）、shrink-0が「縮まない」。素のCSSのflex: 0 0 240pxを2クラスに分けた形です。

ど真ん中に置く

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

<!-- Tailwind -->
<div class="grid place-items-center min-h-screen">
  <p>まんなか</p>
</div>

min-h-screenがmin-height: 100vhです。画面いっぱいの高さはh-screenかmin-h-screen、この2つは出番が多いので覚えておくと便利です。

1つだけ右端に押しやる

<div class="flex gap-4">
  <a href="#">ホーム</a>
  <a href="#">について</a>
  <a href="#" class="ml-auto">ログイン</a>
</div>

ml-autoがmargin-left: auto。素のCSSでよく使う「片方だけautoで押しやる」ワザも、そのまま同じ考え方で書けます。

幅と高さのクラス

レイアウトでよく使うものだけ拾っておきます。

Tailwind	素のCSS
`w-full`	`width: 100%`
`w-1/2`	`width: 50%`
`w-1/3` `w-2/3`	`width: 33.333%` `66.667%`
`w-60`	`width: 15rem`（240px）
`max-w-4xl`	`max-width: 56rem`（896px）
`h-screen`	`height: 100vh`
`min-h-screen`	`min-height: 100vh`
`mx-auto`	`margin-left/right: auto`

中身の横幅を制限して中央に置くという、どのサイトにもある指定はこの2つの組み合わせです。

<div class="max-w-4xl mx-auto px-4">
  ここに本文
</div>

素のCSSの「max-widthで上限、margin-inline: autoで中央、paddingで左右の逃げ」と同じ形です。

このレッスンのまとめ

親にflexかgridを書くところから始まる——書く場所は素のCSSと同じ「親」
justify-contentはjustify-、align-itemsはitems-に短くなっただけ
grid-cols-3は3列の均等割り。中身がはみ出しにくいminmax(0, 1fr)が既定
max-w-4xl mx-autoが、中身の幅を制限して中央に置く定番の組み合わせ
ml-autoやshrink-0のような小ワザも、素のCSSと同じ考え方で使える

次は、この書き方にmd:という接頭辞を足して、画面幅ごとに切りかえる方法を学びます。

FlexboxとGridをクラスで組む