TailwindCSS レイアウト 効かない原因と解決策を30パターンで網羅。Flexbox、Grid、position、サイズ指定など、カテゴリ別に整理した逆引きリストで、あなたの「効かない」をすぐに解決できます。
TailwindCSS でレイアウトを組んでいて、「あれ、効かない…」と困った経験はありませんか？
私も最初は gap や h-full が効かなくて何度も悩みました。公式ドキュメントを見ても、なぜ効かないのかがわからない。そんな経験から、よくあるトラブルと解決策を30パターンにまとめました。
この記事は 逆引きガイド です。困っている症状から解決策を探せます。
この記事の使い方
2つの方法で使えます：
- 逆引きリストから探す → 「悩み別の逆引きリスト」セクションへ
- カテゴリ別に学ぶ → 各カテゴリのセクションを順に読む
カテゴリ別の概要
このガイドでは、TailwindCSS のレイアウト関連クラスを4つのカテゴリに分類しています。
| カテゴリ | 記事数 | 主なクラス |
|---|---|---|
| Flexbox系 | 4本 | gap, flex-wrap, flex-direction, grow/shrink |
| Grid系 | 2本 | grid-cols, grid-rows |
| 配置系 | 1本 | position, absolute, sticky, z-index |
| サイズ系 | 3本 | overflow, width/height, aspect-ratio |
Flexbox系
横並び・縦並びのレイアウトを作るときに使う Flexbox 関連のクラスです。
gap
子要素間の隙間を作るクラス。flex や grid と組み合わせて使います。
よくあるトラブル：
- gap を付けたのに隙間ができない
- 折り返し時に縦の隙間がない
- 親要素との隙間が作れない
詳細記事： TailwindCSS gap 効かない？3つの原因と解決テクニック
flex-wrap
子要素を折り返すかどうかを制御するクラス。レスポンシブなカードレイアウトに必須です。
よくあるトラブル：
- 列数が思い通りにならない
- 要素がはみ出す
- 計算が複雑になる
詳細記事： TailwindCSS flex-wrap 効かない？3つの原因と解決テクニック
flex-direction
子要素の並び方向（横・縦・逆順）を制御するクラス。
よくあるトラブル：
- flex-col で justify-center が横に効かない
- reverse で space-x がズレる
- reverse で start/end が逆になる
詳細記事： TailwindCSS flex-direction テクニック三選｜row・col・reverseの落とし穴
flex-grow / shrink
子要素の伸縮を制御するクラス。サイドバー + メインコンテンツのようなレイアウトに使います。
よくあるトラブル：
- shrink を付けても縮んでしまう
- grow だけでは期待通りにならない
- 伸縮の比率を指定したい
詳細記事： TailwindCSS flex-grow / shrink テクニック三選｜伸縮の落とし穴
Grid系
2次元のレイアウト（行と列）を作るときに使う Grid 関連のクラスです。
grid-cols
列数を指定するクラス。カードを均等に並べるときに使います。
よくあるトラブル：
- grid-cols を指定したのに並ばない
- 長いコンテンツで列が崩れる
- 固定幅の列を作りたい
詳細記事： TailwindCSS grid-cols テクニック三選｜効かない原因と解決策
grid-rows
行数を指定するクラス。ヘッダー・メイン・フッターのような縦方向のレイアウトに使います。
よくあるトラブル：
- grid-rows を指定したのに縦に並ばない
- 子要素の高さが揃わない
- 固定高さと可変高さを組み合わせたい
詳細記事： TailwindCSS grid-rows テクニック三選｜使いどころがわからない？実例で解説
配置系
要素の配置位置や重なり順を制御するクラスです。
position
要素の配置方法を制御するクラス。モーダル、バッジ、固定ヘッダーなどに使います。
よくあるトラブル：
- absolute で親基準にならない
- sticky でスクロールしても固定されない
- z-index が効かない
詳細記事： TailwindCSS position 効かない？原因解決テクニック三選
サイズ系
要素のサイズやはみ出しの制御に関するクラスです。
overflow
はみ出した内容の表示方法を制御するクラス。スクロール領域やカードの角丸に影響します。
よくあるトラブル：
- overflow-hidden で子要素が切れる
- overflow-auto でスクロールバーが出ない
- 常にスクロールバーが表示される
詳細記事： TailwindCSS overflow 効かない？原因解決テクニック三選
width / height
幅と高さを指定するクラス。レスポンシブ対応で特に重要です。
よくあるトラブル：
- h-full が効かない
- w-full で画面幅いっぱいにならない
- max-w を付けてもテキストがはみ出す
詳細記事： TailwindCSS width height テクニック三選｜h-fullやw-fullが効かないときの解決法
aspect-ratio
アスペクト比を指定するクラス。動画や画像のレスポンシブ対応に使います。
よくあるトラブル：
- aspect-video が効かない
- 画像が歪む
- iframe のアスペクト比が崩れる
詳細記事： TailwindCSS aspect-ratio テクニック三選｜aspect-videoやaspect-squareが効かないときの解決法
悩み別の逆引きリスト
「こんな悩み」から解決策を探せます。全30パターン。
Flexbox系のトラブル（12項目）
| # | 悩み | 原因 | 解決策 | 詳細 |
|---|---|---|---|---|
| 1 | gap を付けたのに隙間ができない | 親が flex/grid じゃない | flex または grid を追加 | 詳細 |
| 2 | gap-x だけでは折り返し時に縦の隙間がない | gap-x は横方向のみ | gap を使う（縦横両方） | 詳細 |
| 3 | gap を大きくしても親との隙間が変わらない | gap は子要素間専用 | 親に p-*（padding）を追加 | 詳細 |
| 4 | basis-1/2 + gap で2列にならない | gap分の幅が足りない | basis-[calc(50%-0.5rem)] など計算 | 詳細 |
| 5 | flex-wrap を付けたのに折り返さない | 子要素が縮んでしまう | shrink-0 を追加 | 詳細 |
| 6 | flex-wrap + calc が複雑すぎる | flex の計算は面倒 | grid を使う | 詳細 |
| 7 | flex-col で justify-center が横に効かない | col で軸が変わる | items-center を使う | 詳細 |
| 8 | flex-row-reverse + space-x でスペースがズレる | space-x は margin で実現 | gap を使う | 詳細 |
| 9 | flex-col-reverse + justify-start で下に寄る | reverse で軸が反転 | justify-end を使う | 詳細 |
| 10 | shrink を付けても要素が縮む | shrink はデフォルト1 | shrink-0 を使う | 詳細 |
| 11 | grow を付けても縮んでしまう | shrink も同時に効いている | grow shrink-0 を使う | 詳細 |
| 12 | grow で伸びる比率を変えたい | grow のデフォルトは1 | grow-[2] で比率指定 | 詳細 |
Grid系のトラブル（6項目）
| # | 悩み | 原因 | 解決策 | 詳細 |
|---|---|---|---|---|
| 13 | grid-cols を指定したのに並ばない | grid がない | grid を追加 | 詳細 |
| 14 | 長いURLやテキストで列が崩れる | コンテンツが min-content を超える | min-w-0 + truncate | 詳細 |
| 15 | 固定幅の列を作りたい | grid-cols-* は均等分割 | grid-cols-[200px_1fr_1fr] | 詳細 |
| 16 | grid-rows を指定したのに縦に並ばない | デフォルトは左→右 | grid-flow-col を追加 | 詳細 |
| 17 | カードの高さが揃わない | 子要素の高さがバラバラ | grid-rows-subgrid を使う | 詳細 |
| 18 | ヘッダー固定 + メイン可変のレイアウト | 均等分割ではダメ | grid-rows-[auto_1fr_auto] | 詳細 |
配置系のトラブル（3項目）
| # | 悩み | 原因 | 解決策 | 詳細 |
|---|---|---|---|---|
| 19 | absolute で親基準にならない | 親に relative がない | 親に relative を追加 | 詳細 |
| 20 | sticky でスクロールしても固定されない | top 指定がない | top-0 を追加 | 詳細 |
| 21 | z-index を付けても前面に来ない | position 指定がない | relative を追加 | 詳細 |
サイズ系のトラブル（9項目）
| # | 悩み | 原因 | 解決策 | 詳細 |
|---|---|---|---|---|
| 22 | overflow-hidden で子要素まで切れる | absolute 子要素も影響 | バッジを外側の要素に移動 | 詳細 |
| 23 | overflow-auto でスクロールバーが出ない | 高さ指定がない | h-48 等で高さを指定 | 詳細 |
| 24 | 常にスクロールバーが表示される | scroll は常に表示 | overflow-auto を使う | 詳細 |
| 25 | h-full を付けたのに高さが100%にならない | 親の高さが未定義 | items-stretch を使う | 詳細 |
| 26 | w-full で画面幅いっぱいにならない | 親の幅が100%じゃない | w-screen を使う | 詳細 |
| 27 | max-w-* を付けてもテキストがはみ出す | 長いテキストの折り返し | min-w-0 + break-all | 詳細 |
| 28 | aspect-video を付けたのに効かない | width + height 両方指定 | height を削除 | 詳細 |
| 29 | aspect-square で画像が歪む | アスペクト比と画像比率の不一致 | object-cover を追加 | 詳細 |
| 30 | iframe のアスペクト比が崩れる | height 固定値がある | height 削除 + aspect-video | 詳細 |
よくある質問（FAQ）
Q. flex と grid、どちらを使えばいいですか？
A. 1次元（横並び or 縦並び）なら flex、2次元（行と列）なら grid が基本です。
- flex: ナビゲーション、ボタングループ、サイドバー + メイン
- grid: カード一覧、ダッシュボード、フォームレイアウト
迷ったら flex から始めて、複雑になったら grid を検討しましょう。
Q. gap と space-x の違いは何ですか？
A. gap は Flexbox/Grid 専用、space-x は margin で実現しています。
大きな違いは flex-wrap で折り返したとき。space-x は折り返し時に縦の隙間ができませんが、gap なら縦横両方に隙間が入ります。
基本的には gap を使うことをおすすめします。
Q. なぜ h-full が効かないことがあるの？
A. h-full は親要素の高さの100%という意味です。親の高さが決まっていないと、100%の計算ができません。
解決策は2つ：
- 親要素にも
h-fullを指定する（html, body まで連鎖） items-stretch（Flexbox のデフォルト）を使う
Q. absolute と relative の関係がわかりません
A. absolute は「relative を持つ最も近い親要素」を基準に配置されます。
親に relative がないと、画面全体が基準になってしまいます。バッジやモーダルを親要素内に配置したいときは、必ず親に relative を付けましょう。
A. overflow-hidden は、親要素の範囲外にはみ出た部分をすべて非表示にします。absolute で配置した子要素も例外ではありません。
バッジなど、親の範囲外にはみ出す要素がある場合は、その要素を overflow-hidden の外側に配置する必要があります。
まとめ
TailwindCSS のレイアウトでよくある「効かない」トラブルを30パターン紹介しました。
ポイント:
- Flexbox系: flex/grid の指定忘れ、軸の方向、伸縮のデフォルト値に注意
- Grid系: grid の指定忘れ、flow-col、subgrid を活用
- 配置系: relative と top-0 を忘れずに
- サイズ系: 親の高さ、min-w-0、object-cover がカギ
各トラブルの詳細な解説は、それぞれの詳細記事で確認できます。ブックマークして、困ったときに逆引きリストから探してみてください。