Tokens · Spacing
Spacing
Tailwind 4 ベースのスケールを 4px グリッドに固定。システム内のすべての padding / gap / margin は、このいずれかのステップから派生します。
Scale
00pxpx1px0.52px14px1.56px28px2.510px312px3.514px416px520px624px728px832px936px1040px1248px1456px1664px2080px2496px28112px32128px36144px40160px48192px56224px64256pxよく使う組み合わせ
| Token | 値 | 用途 |
|---|---|---|
h-9 | 36px | Button / Input / Select の高さ ── システム共通のコントロールの拍子 |
gap-2 | 8px | ボタン内のアイコンとラベルの間隔 |
p-4 / p-5 / p-6 | 16 / 20 / 24px | Card の padding（コンパクト / デフォルト / ゆとりあり） |
space-y-4 / space-y-6 / space-y-8 | 16 / 24 / 32px | セクションブロック間の縦リズム |
max-w-2xl / 3xl / 6xl | 672 / 768 / 1152px | プロース / ドキュメント / ランディングの読みやすい幅 |