📐 レイアウト
スペーシングスケール：1 = 4px（例：p-4 → 16px）
Display
| クラス |
CSS |
block |
display: block |
inline-block |
display: inline-block |
inline |
display: inline |
flex |
display: flex |
inline-flex |
display: inline-flex |
grid |
display: grid |
hidden |
display: none |
Flexbox
| クラス |
説明 |
flex-row / flex-col |
主軸：横 / 縦 |
flex-wrap |
折り返し有効 |
justify-start / center / end |
主軸の揃え |
justify-between / around |
均等配置 |
items-start / center / end |
交差軸の揃え |
items-stretch |
引き伸ばし（デフォルト） |
flex-1 |
flex: 1 1 0%（伸縮） |
shrink-0 |
縮小しない |
gap-{n} |
アイテム間の間隔 |
Grid
| クラス |
説明 |
grid-cols-{1-12} |
列数指定 |
col-span-{n} |
n列にまたがる |
grid-rows-{n} |
行数指定 |
row-span-{n} |
n行にまたがる |
gap-{n} |
行列の間隔 |
gap-x-{n} / gap-y-{n} |
列間 / 行間 |
Position
| クラス |
説明 |
static / relative / absolute |
position 指定 |
fixed / sticky |
position 指定 |
top / right / bottom / left-{n} |
位置指定 |
inset-0 |
top/right/bottom/left: 0 |
| `z-{0 |
10 |
📏 スペーシング
スケール対応表
| クラス |
値 |
クラス |
値 |
クラス |
値 |
p-0 / m-0 |
0px |
p-4 / m-4 |
16px |
p-10 / m-10 |
40px |
p-1 / m-1 |
4px |
p-5 / m-5 |
20px |
p-12 / m-12 |
48px |
p-2 / m-2 |
8px |
p-6 / m-6 |
24px |
p-16 / m-16 |
64px |
p-3 / m-3 |
12px |
p-8 / m-8 |
32px |
p-20 / m-20 |
80px |
方向指定
| 記号 |
方向 |
p-{n} / m-{n} |
全方向 |
px-{n} / mx-{n} |
左右（x軸） |
py-{n} / my-{n} |
上下（y軸） |
pt / pr / pb / pl |
上 / 右 / 下 / 左 |
mx-auto |
水平中央揃え |
-m-{n} |
負のマージン |
space-x-{n} / space-y-{n} |
子要素の横間隔 / 縦間隔 |
📦 サイジング
Width
| クラス |
値 |
w-full |
100% |
w-screen |
100vw |
w-auto |
auto |
w-1/2 / w-1/3 / w-2/3 |
50% / 33.3% / 66.7% |
w-1/4 / w-3/4 |
25% / 75% |
min-w-0 / min-w-full |
最小幅 |
max-w-sm / md / lg / xl / 2xl |
最大幅（プリセット） |
max-w-full / max-w-none |
100% / 無制限 |
Height
| クラス |
値 |
h-full |
100% |
h-screen |
100vh |
h-auto |
auto |
h-{n} |
スペーシングスケール準拠 |
min-h-screen |
min-height: 100vh |
max-h-full |
max-height: 100% |
🔤 タイポグラフィ
Font Size
| クラス |
サイズ / 行高 |
text-xs |
12px / 16px |
text-sm |
14px / 20px |
text-base |
16px / 24px |
text-lg |
18px / 28px |
text-xl |
20px / 28px |
text-2xl |
24px / 32px |
text-3xl |
30px / 36px |
text-4xl |
36px / 40px |
Font Weight / Style
| クラス |
値 |
font-thin |
100 |
font-light |
300 |
font-normal |
400 |
font-medium |
500 |
font-semibold |
600 |
font-bold |
700 |
font-extrabold |
800 |
italic / not-italic |
斜体あり / なし |
Text Align / Decoration
| クラス |
説明 |
text-left / center / right |
テキスト揃え |
text-justify |
両端揃え |
underline / line-through / no-underline |
下線 / 取り消し線 / なし |
uppercase / lowercase / capitalize |
大文字 / 小文字 / 先頭大文字 |
truncate |
テキスト省略（…） |
leading-tight / normal / loose |
行間 |
tracking-tight / wide |
文字間隔 |
🎨 カラー
命名規則
| 種類 |
書式 |
| テキスト色 |
text-{color}-{shade} |
| 背景色 |
bg-{color}-{shade} |
| ボーダー色 |
border-{color}-{shade} |
| シェード値 |
50 100 200 300 400 500 600 700 800 900 950 |
| 透明度修飾子 |
bg-blue-500/50（50%透明） |
| 任意の値 |
text-[#1a2b3c] |
主なカラー
| カラー名 |
系統 |
slate / gray / zinc / neutral / stone |
グレー系 |
red / orange / amber |
暖色系 |
yellow / lime / green / emerald |
黄緑系 |
teal / cyan / sky |
青緑系 |
blue / indigo / violet |
青紫系 |
purple / fuchsia / pink / rose |
ピンク系 |
white / black / transparent |
基本色 |
🖼️ ボーダー / 角丸 / 影
Border
| クラス |
説明 |
border |
1px solid（全方向） |
| `border-{0 |
2 |
border-t / r / b / l |
上 / 右 / 下 / 左のみ |
border-dashed / dotted |
破線 / 点線 |
divide-x-{n} / divide-y-{n} |
子要素間の区切り線 |
Border Radius
| クラス |
値 |
rounded-none |
0 |
rounded-sm |
2px |
rounded |
4px |
rounded-md |
6px |
rounded-lg |
8px |
rounded-xl / 2xl |
12px / 16px |
rounded-full |
9999px（円形） |
Box Shadow
| クラス |
説明 |
shadow-sm / shadow / shadow-md |
影（小〜中） |
shadow-lg / shadow-xl / shadow-2xl |
影（大） |
shadow-none |
影なし |
✨ エフェクト / トランジション
Opacity / Overflow
| クラス |
説明 |
| `opacity-{0 |
25 |
invisible / visible |
visibility: hidden / visible |
overflow-hidden |
はみ出し非表示 |
overflow-auto |
スクロール（必要時） |
overflow-scroll |
常にスクロール |
Transition / Transform
| クラス |
説明 |
transition / transition-all |
トランジション（基本 / 全プロパティ） |
| `duration-{75 |
150 |
ease-in / ease-out / ease-in-out |
イージング |
| `scale-{75 |
90 |
| `rotate-{45 |
90 |
translate-x-{n} / translate-y-{n} |
移動 |
📱 レスポンシブ / 状態修飾子
ブレークポイント（モバイルファースト）
| 修飾子 |
最小幅 |
例 |
sm: |
640px〜 |
sm:flex |
md: |
768px〜 |
md:grid-cols-2 |
lg: |
1024px〜 |
lg:text-xl |
xl: |
1280px〜 |
xl:max-w-5xl |
2xl: |
1536px〜 |
2xl:p-12 |
状態修飾子
| 修飾子 |
説明 |
例 |
hover: |
マウスオーバー |
hover:bg-blue-600 |
focus: |
フォーカス時 |
focus:outline-none |
active: |
クリック時 |
active:scale-95 |
disabled: |
無効時 |
disabled:opacity-50 |
dark: |
ダークモード |
dark:bg-gray-900 |
group-hover: |
親要素ホバー時 |
group-hover:text-white |
first: / last: |
最初 / 最後の子要素 |
last:border-0 |
odd: / even: |
奇数行 / 偶数行 |
even:bg-gray-50 |
⚙️ 任意値 / よく使うパターン
任意値（Arbitrary Values）
w-[320px] <!-- 幅 320px -->
text-[14px] <!-- フォントサイズ 14px -->
bg-[#1a2b3c] <!-- 任意の背景色 -->
mt-[10px] <!-- 上マージン 10px -->
grid-cols-[1fr_2fr] <!-- 任意のグリッド定義 -->
top-[calc(50%-1rem)] <!-- calc() 使用 -->
よく使うパターン
| パターン |
クラス |
| 水平中央揃え（ブロック） |
mx-auto |
| Flex で中央配置 |
flex items-center justify-center |
| 全画面オーバーレイ |
fixed inset-0 |
| カード基本 |
rounded-xl shadow-md p-6 |
| ボタン基本 |
px-4 py-2 rounded font-semibold |
| テキスト省略 |
truncate overflow-hidden |
| アスペクト比 16:9 |
aspect-video |
| アスペクト比 1:1 |
aspect-square |
詳細は tailwindcss.com/docs を参照