レイアウト
| クラス | 意味 | CSS |
|---|
flex | フレックスボックス | display: flex |
grid | グリッド | display: grid |
hidden | 非表示 | display: none |
block | ブロック | display: block |
フレックス方向・配置
| クラス | 意味 |
|---|
flex-col | 縦並び |
flex-row | 横並び（デフォルト） |
items-center | 縦方向中央揃え |
justify-center | 横方向中央揃え |
justify-between | 両端揃え |
gap-4 | 要素間の隙間 |
サイズ
| クラス | 意味 |
|---|
w-full | 幅100% |
w-64 | 幅256px（64×4） |
h-24 | 高さ96px（24×4） |
max-w-4xl | 最大幅896px |
flex-1 | 残りスペースを埋める |
余白
| クラス | 意味 |
|---|
p-4 | 内側余白 全方向 |
px-4 | 内側余白 左右 |
py-4 | 内側余白 上下 |
m-4 | 外側余白 全方向 |
mb-4 | 外側余白 下 |
space-y-4 | 子要素間の縦余白 |
数値の目安
1 = 4px 2 = 8px 4 = 16px 6 = 24px 8 = 32px 12 = 48px 16 = 64px
レスポンシブ
| プレフィックス | 画面幅 |
|---|
| (なし) | 0px〜 |
sm: | 640px〜 |
md: | 768px〜 |
lg: | 1024px〜 |
xl: | 1280px〜 |
覚え方のコツ
m = margin, p = paddingx = 左右, y = 上下t = top, b = bottom, l = left, r = rightw = width, h = height