Tailwind CSS
by Natsumi Chiba
Tailwind CSS の基礎（余白クラス）
ここでは Tailwind CSS の余白クラスについて学びます。
余白クラスの基本ルール
書き方の基本：
[プロパティ][方向]-[サイズ]
例：
m-4
pt-2
mx-auto
プロパティ
| 略 | 意味 | CSS |
|---|---|---|
| m | margin（外側の余白） | margin |
| p | padding（内側の余白） | padding |
方向
| 略 | 意味 | 方向 |
|---|---|---|
| t | top | 上 |
| b | bottom | 下 |
| l | left | 左 |
| r | right | 右 |
| x | x-axis | 左右 |
| y | y-axis | 上下 |
| なし | 全方向 | 全部 |
サイズ
Tailwind は 数字 = 固定スケール です
| クラス | px換算（目安） |
|---|---|
| 0 | 0px |
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 6 | 24px |
| 8 | 32px |
| 12 | 48px |
| 16 | 64px |
よく使う組み合わせ一覧
margin（外側）
| クラス | 意味 |
|---|---|
| m-4 | 全方向 margin |
| mt-2 | 上 margin |
| mb-8 | 下 margin |
| ml-4 | 左 margin |
| mr-4 | 右 margin |
| mx-auto | 左右 auto（中央寄せ） |
| my-6 | 上下 margin |
padding（内側）
| クラス | 意味 |
|---|---|
| p-4 | 全方向 padding |
| pt-2 | 上 padding |
| pb-6 | 下 padding |
| pl-4 | 左 padding |
| pr-4 | 右 padding |
| px-4 | 左右 padding |
| py-8 | 上下 padding |
覚え方
基本ルール：
m / p + t / b / l / r / x / y + 数字
意味：
- m = 外側（margin）
- p = 内側（padding）
- x = 左右
- y = 上下