1. 余白（margin / padding）
- m-4 — margin
- mt-2 — margin-top
- p-4 — padding
- px-3 — 左右 padding
- py-2 — 上下 padding
例
/ -------- 1. 余白 --------
section.flex.flex-col.gap-6.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 1. 余白（margin / padding）
.flex.flex-col.gap-2.rounded.bg-stone-50.p-4.text-sm.text-stone-700
p.font-semibold.text-stone-900 色の見方
ul.flex.flex-col.gap-1
li
span.inline-block.size-4.align-middle.rounded.bg-stone-300
| 灰色 … 親の背景（margin のすきまに見える）
li
span.inline-block.size-4.align-middle.rounded.bg-blue-500
| 青色 … 要素自体の背景
li
span.inline-block.size-4.align-middle.rounded.bg-white.border.border-stone-300
| 白色 … 中身（文字など）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code p-4
| … padding（内側の余白）青と白の間
.bg-blue-500.p-4.rounded
.bg-white.text-center.text-sm.text-stone-900.py-2 中身
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code m-4
| … margin（外側の余白）青の外側の灰色
.bg-stone-300.rounded.p-1
.bg-blue-500.m-4.p-2.text-center.text-sm.text-white 青い箱
.grid.grid-cols-1.gap-4.sm:grid-cols-2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 mt-2 なし
.bg-stone-300.rounded.p-2
.bg-green-600.p-2.text-center.text-xs.text-white 1つ目
.bg-green-600.p-2.text-center.text-xs.text-white 2つ目（くっつく）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code mt-2
| あり
.bg-stone-300.rounded.p-2
.bg-green-600.p-2.text-center.text-xs.text-white 1つ目
.bg-green-600.mt-2.p-2.text-center.text-xs.text-white 2つ目（上に隙間）
.grid.grid-cols-1.gap-4.sm:grid-cols-2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code px-3
| … 左右だけ広い
.bg-orange-500.px-3.rounded
.bg-white.text-center.text-xs.text-stone-900.py-4 中身
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code py-2
| … 上下だけ広い
.bg-orange-500.py-2.rounded
.bg-white.text-center.text-xs.text-stone-900.px-8 中身
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500
code p-4
| +
code mt-2
| を両方つけた例（HTML の class="p-4 mt-2" と同じ）
.bg-stone-300.rounded.p-1
.bg-blue-500.mt-2.p-4.rounded
.bg-white.text-center.text-sm.text-stone-900
| 外の灰色＝mt-2 / 青と白の間＝p-4
上記コードをコピペして貼り付けるとこれが表示される。
2. 文字（font / text）
- text-sm — 小さめ文字
- text-lg — 大きめ文字
- font-bold — 太字
- text-center — 中央寄せ
- text-gray-500 — グレー文字
/ -------- 2. 文字 --------
section.flex.flex-col.gap-4.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 2. 文字（font / text）
.flex.flex-col.gap-2
p 標準
p.text-sm 小さめの文字（text-sm）
p.text-lg 大きめの文字（text-lg）
p.font-bold 太字（font-bold）
p.text-center 中央寄せ（text-center）
p.text-gray-500 グレー文字（text-gray-500）
p.text-red-500 赤文字（text-red-500）
上記コードを貼り付けるとこんな感じになる。
3. 色（background / text）
- bg-blue-500 — 青背景
- bg-gray-100 — 薄いグレー背景
- text-white — 白文字
などなど。
bgは背景の色を設定するときにつかい、textではテキストカラーを決めれる。
例
/ -------- 3. 色 --------
section.flex.flex-col.gap-4.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 3. 色（background / text）
.flex.flex-col.gap-2.rounded.bg-stone-50.p-4.text-sm.text-stone-700
p.font-semibold.text-stone-900 名前の見方
ul.flex.flex-col.gap-1
li
code bg-
| … 背景色（箱の塗り）
li
code text-
| … 文字色
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 標準（色クラスなし）
.px-4.py-2.rounded.border.border-stone-200 背景も文字色もデフォルト
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code bg-blue-500
.bg-blue-500.px-4.py-2.rounded 青い背景だけ（bg-blue-500）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code bg-gray-100
.bg-gray-100.px-4.py-2.rounded 薄いグレー背景だけ（bg-gray-100）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code text-white
.bg-stone-900.px-4.py-2.rounded
p.text-white 白文字だけ（text-white）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 組み合わせ（ボタンでよく使う）
button.bg-blue-500.text-white.px-4.py-2.rounded type="button"
| 送信（bg-blue-500 + text-white）
上記時コードをコピペして貼り付けるとこうなる
4. レイアウト（flex / grid）
- flex — Flexboxを有効化
- items-center — 縦中央
- justify-between — 両端寄せ
- gap-4 — 要素間の隙間
- grid — Gridを有効化
Flexboxとは
要素を 横並び や 縦並び にしたい時に使う.
1次元レイアウト（横 or 縦）
例
- 横にボタンを並べる
- アイコンと文字を横並びにする
- ヘッダーの左右配置
Grid
カードをタイル状に並べたい時に使う。
2次元レイアウト（縦 × 横）
例
- 2列のカード一覧
- 3×3 の画像ギャラリー
- ダッシュボードのパネル配置
例
/ -------- 4. レイアウト --------
section.flex.flex-col.gap-6.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 4. レイアウト（flex / grid）
.flex.flex-col.gap-2.rounded.bg-stone-50.p-4.text-sm.text-stone-700
p.font-semibold.text-stone-900 ざっくり
ul.flex.flex-col.gap-1
li
code flex
| … 横並び（Flexbox）
li
code grid
| … マス目状に並べる（Grid）
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code flex だけ（横に並ぶ）
.flex.bg-stone-200.p-2.rounded
.bg-blue-500.px-3.py-2.text-sm.text-white A
.bg-blue-500.px-3.py-2.text-sm.text-white B
.bg-blue-500.px-3.py-2.text-sm.text-white C
.grid.grid-cols-1.gap-4.sm:grid-cols-2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 items-center なし
.flex.h-24.bg-stone-200.p-2.rounded
.bg-green-600.px-3.py-1.text-sm.text-white 低い
.bg-green-600.px-3.py-8.text-sm.text-white 高い
.bg-green-600.px-3.py-1.text-sm.text-white 低い
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code items-center
.flex.h-24.items-center.bg-stone-200.p-2.rounded
.bg-green-600.px-3.py-1.text-sm.text-white 低い
.bg-green-600.px-3.py-8.text-sm.text-white 高い
.bg-green-600.px-3.py-1.text-sm.text-white 低い
.grid.grid-cols-1.gap-4.sm:grid-cols-2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 justify-between なし（左に寄る）
.flex.bg-stone-200.p-4.rounded
span.bg-blue-500.px-3.py-1.text-sm.text-white 左
span.bg-blue-500.px-3.py-1.text-sm.text-white 右
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code justify-between
.flex.justify-between.bg-stone-200.p-4.rounded
span.bg-blue-500.px-3.py-1.text-sm.text-white 左
span.bg-blue-500.px-3.py-1.text-sm.text-white 右
.grid.grid-cols-1.gap-4.sm:grid-cols-2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 gap なし（くっつく）
.flex.bg-stone-200.p-2.rounded
.bg-orange-500.px-3.py-2.text-sm.text-white 1
.bg-orange-500.px-3.py-2.text-sm.text-white 2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code gap-4
.flex.gap-4.bg-stone-200.p-2.rounded
.bg-orange-500.px-3.py-2.text-sm.text-white 1
.bg-orange-500.px-3.py-2.text-sm.text-white 2
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code grid grid-cols-2（2列のマス目）
.grid.grid-cols-2.gap-4
.bg-stone-200.p-4.text-center.text-sm 1
.bg-stone-200.p-4.text-center.text-sm 2
.bg-stone-200.p-4.text-center.text-sm 3
.bg-stone-200.p-4.text-center.text-sm 4
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 組み合わせ（よく使う）
.flex.items-center.justify-between.gap-4.bg-stone-200.p-4.rounded
span.bg-blue-500.px-3.py-1.text-sm.text-white 左
span.bg-blue-500.px-3.py-1.text-sm.text-white 右
上記コードをコピペするとこうなる
5. 枠線・角丸・影
- rounded — 角丸
- rounded-lg — 大きめ角丸
- border — 枠線
- border-gray-300 — グレー枠線
- shadow — 影
などなど
例
/ -------- 5. 枠線・角丸・影 --------
section.flex.flex-col.gap-6.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 5. 枠線・角丸・影
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 標準（角丸・枠・影なし）
.flex.h-24.w-full.max-w-sm.items-center.justify-center.bg-stone-100.text-sm 四角い箱
.grid.grid-cols-1.gap-4.sm:grid-cols-3
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 角丸なし
.flex.h-24.w-full.items-center.justify-center.border-2.border-blue-600.bg-blue-50.text-sm 四角
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code rounded
.flex.h-24.w-full.items-center.justify-center.rounded.border-2.border-blue-600.bg-blue-50.text-sm 少し丸い
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code rounded-lg
.flex.h-24.w-full.items-center.justify-center.rounded-lg.border-2.border-blue-600.bg-blue-50.text-sm 大きめ丸い
.grid.grid-cols-1.gap-4.sm:grid-cols-3
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 枠線なし
.flex.h-24.w-full.items-center.justify-center.bg-stone-100.text-sm 枠なし
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code border
.flex.h-24.w-full.items-center.justify-center.border-2.border-stone-900.bg-white.text-sm 黒っぽい枠
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code border-gray-300
.flex.h-24.w-full.items-center.justify-center.border-2.border-gray-300.bg-white.text-sm グレー枠
.flex.flex-col.gap-4
p.text-sm.text-stone-600 影は箱の「外側」にできます。右の箱の下と右を見比べてください。
.flex.flex-wrap.gap-12.py-6
.flex.flex-col.gap-2.items-center
p.text-xs.font-mono.text-stone-500 shadow なし
.flex.h-28.w-40.items-center.justify-center.bg-white.border.border-stone-300.text-sm フラット
.flex.flex-col.gap-2.items-center
p.text-xs.font-mono.text-stone-500 code shadow-lg
.flex.h-28.w-40.items-center.justify-center.bg-white.border.border-stone-300.shadow-lg.text-sm 影つき
p.text-xs.text-stone-500 ↘ 下・右に影
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 組み合わせ（カードっぽく）
.max-w-sm.bg-white.p-6.rounded-lg.border.border-gray-300.shadow-lg.text-sm
| rounded-lg + border-gray-300 + shadow
これをコピペするとこうなる。
6. サイズ（width / height）
- w-full — 横幅100%
- w-1/2 — 半分
- h-10 — 高さ指定
Tailwind では、画面幅に応じてクラスを切り替えるために
ブレークポイント（prefix） を使う。
- sm: スマホ以上 640px〜
- md: タブレット以上 768px〜
- lg: ノートPC以上 1024px〜
- xl: 大画面 1280px〜
例
/ -------- 6. サイズ --------
section.flex.flex-col.gap-4.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 6. サイズ（width / height）
.flex.flex-col.gap-4
.w-full.bg-blue-100.p-2.text-center.text-sm w-full
.w-1/2.bg-blue-100.p-2.text-center.text-sm w-1/2
.h-10.flex.items-center.justify-center.bg-gray-200.text-sm h-10
7. 表示・位置
- block — ブロック要素
- inline-block — インラインブロック
- hidden — 非表示
- absolute — 絶対配置
- relative — 相対配置
block — ブロック要素
横幅いっぱいを占有して、次の要素は改行される。
span class="block bg-blue-200" ブロック
- div と同じ動き
- 幅は基本的に 100%
- 縦に積み上がる
inline-block — インラインブロック
横に並ぶけど、サイズ（width/height）を指定できる。
span class="inline-block bg-pink-200 w-24 h-8" 箱
- 横に並ぶ
- でも block のようにサイズ指定できる
- ボタンやタグ UI によく使う
hidden — 完全に非表示
要素が “存在しない” 扱いになる。
div class="hidden" これは見えない
- レイアウト上から消える
- display: none と同じ
- レスポンシブと組み合わせると便利
- sm:hidden（スマホ以上で非表示）
- md:block（タブレット以上で表示）
relative — 相対配置（基準を作る）
子要素の absolute の “基準” になる。
div class="relative"
div class="absolute top-2 right-2" 角に配置
absolute — 絶対配置
親（relative）の中で “好きな位置” に置ける。
div class="relative bg-gray-100 p-6"
div class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1 rounded"
NEW
- top / right / bottom / left で位置指定
- 親が relative じゃないと 画面全体基準 になってしまう
- バッジ・ラベル・モーダルなどでよく使う
まとめ（超短く）
| クラス | 意味 |
|---|---|
| block | 縦に積む（幅100%） |
| inline-block | 横に並ぶ＋サイズ指定OK |
| hidden | 完全に非表示 |
| relative | absolute の基準を作る |
| absolute | 親 relative の中で自由配置 |
/ -------- 7. 表示・位置 --------
section.flex.flex-col.gap-6.border.border-stone-200.bg-white.rounded-lg.p-6
h2.text-base.font-semibold.text-stone-900 7. 表示・位置
.flex.flex-col.gap-2.rounded.bg-stone-50.p-4.text-sm.text-stone-700
p.font-semibold.text-stone-900 ざっくり
ul.flex.flex-col.gap-1
li
code block
| … 横いっぱい使って縦に並ぶ
li
code inline-block
| … 横に並びつつ、幅・高さを指定できる
li
code hidden
| … 画面に表示しない
li
code relative
| +
code absolute
| … 親を基準に、子を好きな位置へ
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 普通の span（横に続く）
.border.border-stone-200.p-3.rounded
span.bg-blue-100.px-2.py-1 A
span.bg-blue-100.px-2.py-1 B
span.bg-blue-100.px-2.py-1 C
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code block（1つずつ改行される）
.border.border-stone-200.p-3.rounded
span.block.bg-blue-500.px-2.py-2.text-sm.text-white A
span.block.bg-blue-500.px-2.py-2.text-sm.text-white B
span.block.bg-blue-500.px-2.py-2.text-sm.text-white C
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code inline-block（横並び + 幅指定）
.border.border-stone-200.p-3.rounded
span.inline-block.w-24.bg-orange-200.p-4.text-center.text-sm 1
span.inline-block.w-24.bg-orange-200.p-4.text-center.text-sm 2
.flex.flex-col.gap-4
p.text-xs.font-mono.text-stone-500 code hidden（2つ目の箱が消える）
.flex.flex-col.gap-2
p.text-sm.text-stone-600 両方表示
.flex.gap-2
.bg-green-200.px-6.py-4.text-sm A
.bg-green-200.px-6.py-4.text-sm B
.flex.flex-col.gap-2
p.text-sm.text-stone-600 B に hidden を付けた
.flex.gap-2
.bg-green-200.px-6.py-4.text-sm A
.hidden.bg-green-200.px-6.py-4.text-sm B
p.text-xs.text-stone-500 ※ B は HTML にあるが、画面にも隙間にも出ない
.flex.flex-col.gap-2
p.text-xs.font-mono.text-stone-500 code relative + absolute
.relative.h-40.w-full.max-w-md.border-2.border-stone-400.bg-stone-50.p-4
p.text-sm 親（relative）… 基準になる箱
.absolute.top-2.right-2.bg-blue-500.text-white.text-xs.px-3.py-1.rounded
| 子（absolute）右上
上記をコピペするとこうなる
