Tailwindで「崩れないUI」を作るために意識していること
弊社ではCSSのコーディングにTailwind CSSを導入しています。
TailwindCSSはとても自由度が高く、スピーディにUIを組める反面、油断すると
- 画面サイズで崩れる
- 文言が長くなるとレイアウトが壊れる
- データが増えたら崩れる
といった「実運用で死ぬUI」になりがちです。
この記事では、実際の開発で意識している“崩れないための設計ルール”をまとめます。
目次
1. 幅は「固定」より「制御」
❌ よくある間違い
<div class="w-64">
これは危険です。なぜなら、想定外の文字量が来た場合に崩れてしまうからです。
代わりに使うのは：
<div class="min-w-0 flex-1">
または
<div class="max-w-[240px] truncate">
ポイント
flex-1 + min-w-0はセット- 固定幅より
max-w - 可変エリアは必ず逃げ道を作る
特に truncate （3点リードにする）を効かせたい場合は 親に min-w-0 が無いと動きません。
2. truncate前提で設計する
長い文字列は必ず来ます。
- 名前
- タイトル
- メールアドレス
- 住所
なので最初から：
<span class="truncate">
を前提に設計します。
さらに横並びの場合：
<div class="flex min-w-0"> <span class="flex-1 truncate"></span> <span class="shrink-0"></span> </div>
コツ
- 伸びる側 →
flex-1 min-w-0 truncate - 固定側 →
shrink-0
これだけ多くの崩れは防げます。
3. paddingで余白を作り、marginは極力使わない
基本ルールとしてpaddingで余白を作り、marginは極力使わずにCSSを組みます。
理由は単純で、
- marginは重なって予測不能
- コンポーネント再利用時に事故る
なので基本は：
<div class="p-l">
横並びの間隔は：
<div class="flex gap-x-m">
縦は：
<div class="space-y-s">
Tailwindの gap / space-* を使います。
4. 「データが無い場合」を必ず考える
これをやらないと本番で壊れます。
- null
- 空配列
- 0件
UI側では必ず：
- empty state
- no result
を用意します。
例：
<div class="text-center text-gray-400 py-xl"> データがありません </div>
これが無いと「真っ白UI」が発生してユーザに不安を与えます。
5. 高さは極力 auto、固定するなら理由を持つ
これも重要。
❌
<div class="h-12">
理由が無い固定高はバグの温床になることが多いです。
使うのは：
- ボタン
- 行の高さ
- アイコンエリア
くらい。
一覧やカードは基本：
h-auto
＋ padding。
6. 「崩れチェック」はダミーデータでやる
開発中に必ず入れる：
- 長いテキスト
- 絵文字
- 空文字
- 想定外フォーマット
これで壊れなければかなり安心です。
まとめ
Tailwindで崩れないUIを作るコツは、テクニックというより考え方です。
- 固定しすぎない
- truncate前提
- min-w-0忘れない
- padding主体
- empty stateを用意
- ダミーデータで破壊テスト
これを意識するだけで、実運用でかなり崩れることを防げます。