TailwindCSS の gap が効かない原因を3つのパターンに分けて解説。flex/grid との関係、gap-x/gap-y の違い、親要素との隙間の作り方まで、実例コードで学べます。
Contents
この記事から得られる知識
TailwindCSS gap 効かない問題でお困りですか？gap は便利なユーティリティですが、使い方を間違えると全く効かないことがあります。
この記事を読むと、以下のことがわかります：
- gap が効かない3つの原因と解決方法
- gap-x と gap-y の正しい使い分け
- gap では作れない「親との隙間」の対処法
これらを理解すれば、gap を使ったレイアウトで迷うことがなくなります。
【体験談】gap を知って余白調整が楽になった
gap を知る前は、コンテンツ同士の余白を margin や padding で都度調整していました。とりあえず最小値や最大値を入れて、画面を見ながら調整を繰り返す——1コンテンツあたり5分〜20分、累計で1〜2時間と余計な時間がかかっていた気がします。
あるとき、公式ドキュメントで別のクラスを調べていたときに偶然 gap を発見しました。「これは便利そうだ」と思って使い始めたのがきっかけです。
gap を使い始めてからは、コンテンツの余白を取るときの時間が大幅に短縮されました。ただ、最初は使い方を間違えて「効かない」と悩むこともありました。この記事では、gap を使う上で注意すべきポイントを3つのテクニックとしてまとめました。
テクニック1：gap は flex / grid でしか効かない
gap が効かない最も多い原因は、flex や grid を指定していないことです。
よくある誤解
Aさんは TailwindCSS の公式ドキュメント（https://tailwindcss.com/docs/gap）で gap を見つけました。
- 公式ドキュメントで gap を見つける
- 「gap-4 を使えば要素間に隙間ができる」と理解
- div に gap-4 を付けてみる
- 隙間ができない
NG コード
<div class="bg-slate-700 p-8">
<div class="gap-4">
<div class="bg-white p-4 rounded">アイテム1</div>
<div class="bg-white p-4 rounded">アイテム2</div>
<div class="bg-white p-4 rounded">アイテム3</div>
</div>
</div>
OK コード
<div class="bg-slate-700 p-8">
<div class="flex gap-4">
<div class="bg-white p-4 rounded">アイテム1</div>
<div class="bg-white p-4 rounded">アイテム2</div>
<div class="bg-white p-4 rounded">アイテム3</div>
</div>
</div>
解説
gap は CSS の gap プロパティに対応しています。この gap は flex または grid コンテナでのみ機能する プロパティです。
通常の div（block 要素）に gap を付けても、ブラウザは無視します。flex や grid を指定して初めて、子要素間の隙間として機能します。
ポイント
gap で隙間を作りたいときは、flex または grid と一緒に使いましょう。
テクニック2：gap-x と gap-y を正しく使い分ける
gap-x と gap-y の使い分けを間違えると、折り返し時に隙間がなくなります。
よくある誤解
Bさんは公式ドキュメント（https://tailwindcss.com/docs/gap）で gap-x と gap-y の違いを調べました。
- 公式ドキュメントで gap-x（横方向）と gap-y（縦方向）を発見
- flex で横並びにしたので gap-x を使う
- flex-wrap で折り返したら 縦の隙間がない
NG コード
<div class="bg-slate-700 p-8">
<div class="flex flex-wrap gap-x-4 max-w-md">
<div class="bg-white p-4 rounded w-32">アイテム1</div>
<div class="bg-white p-4 rounded w-32">アイテム2</div>
<div class="bg-white p-4 rounded w-32">アイテム3</div>
<div class="bg-white p-4 rounded w-32">アイテム4</div>
</div>
</div>
OK コード
<div class="bg-slate-700 p-8">
<div class="flex flex-wrap gap-4 max-w-md">
<div class="bg-white p-4 rounded w-32">アイテム1</div>
<div class="bg-white p-4 rounded w-32">アイテム2</div>
<div class="bg-white p-4 rounded w-32">アイテム3</div>
<div class="bg-white p-4 rounded w-32">アイテム4</div>
</div>
</div>
解説
各クラスの効果は以下の通りです。
| クラス | 効果 |
|---|---|
| gap-4 | 縦横両方に隙間 |
| gap-x-4 | 横方向のみ隙間 |
| gap-y-4 | 縦方向のみ隙間 |
flex-wrap で折り返すレイアウトでは、縦横両方の隙間が必要になることが多いです。gap-x だけ指定すると、折り返した行との間に隙間ができません。
縦横で異なる隙間が必要な場合のみ gap-x / gap-y を使い、通常は gap で両方指定するのがおすすめです。
ポイント
折り返しがあるレイアウトで隙間を作りたいときは、gap を使いましょう。
テクニック3：親要素との隙間は gap では作れない
gap で親要素との隙間を作ろうとしても、効果はありません。
よくある誤解
Cさんは公式ドキュメント（https://tailwindcss.com/docs/gap）を参考に gap を使ってレイアウトを組んでいました。
- flex + gap-4 で子要素間の隙間は完璧
- 「親要素との隙間も gap で作れるのでは？」と考える
- gap の値を大きくしてみる
- 親との隙間は変わらない
NG コード
<div class="bg-slate-700 p-2">
<div class="flex gap-8 bg-slate-500">
<div class="bg-white p-4 rounded">アイテム1</div>
<div class="bg-white p-4 rounded">アイテム2</div>
<div class="bg-white p-4 rounded">アイテム3</div>
</div>
</div>
OK コード
<div class="bg-slate-700 p-2">
<div class="flex gap-4 p-4 bg-slate-500">
<div class="bg-white p-4 rounded">アイテム1</div>
<div class="bg-white p-4 rounded">アイテム2</div>
<div class="bg-white p-4 rounded">アイテム3</div>
</div>
</div>
解説
gap は 子要素同士の間の隙間 を指定するプロパティです。親要素と子要素の間の隙間には影響しません。
目的に応じて使うプロパティを選びましょう。
| 目的 | 使うプロパティ |
|---|---|
| 子要素同士の隙間 | gap |
| 親要素との隙間（内側） | padding |
| 親要素との隙間（外側） | margin |
gap、padding、margin はそれぞれ役割が異なります。混同しないように覚えておきましょう。
ポイント
親要素との隙間を作りたいときは、padding を使いましょう。
まとめ
TailwindCSS gap 効かない問題の原因と解決方法を3つ紹介しました。
- テクニック1: gap は flex / grid と一緒に使う
- テクニック2: 折り返しレイアウトでは gap を使う（gap-x / gap-y ではなく）
- テクニック3: 親との隙間は padding で作る
gap は正しく使えばとても便利なユーティリティです。この記事で紹介したポイントを押さえて、効率的にレイアウトを組んでいきましょう。
最初の一歩を踏み出したい方へ
調べても調べても、何が正解かわからない——
WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。
何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。
それでも諦めずに、調べて、手を動かして、試し続けました。
その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。
同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。