tailwindcss-spacing

Tailwind CSS v4.3 のスペーシングユーティリティに関する完全なリファレンスです。マージン（`m-*` と各辺のバリエーション、負のマージン、中央揃え用の `m-auto`）、パディング（`p-*` と各辺のバリエーション）、論理ブロック軸のマージン／パディング（v4.2 以降の `mbs-*`／`mbe-*`／`pbs-*`／`pbe-*`）、およびスペース-between（フレックス／グリッドの子要素向けの `space-x-*`／`space-y-*`）を扱います。

設定可能なスペーシングスケール（基準単位 --spacing、デフォルトは 0.25rem）と、よく使われる組み合わせパターン（中央揃えのコンテナ、パディング付きカード、積み重ねた子要素）についても説明します。

Tailwind CSS のスペーシングユーティリティ

Tailwind CSS v4.3 のスペーシングユーティリティ（マージン、パディング、スペース-between）に関する完全なリファレンスです。

クイックリファレンス

マージンクラス

• m-{size}：全辺のマージン
• mx-{size}：水平方向（左＋右）
• my-{size}：垂直方向（上＋下）
• mt-{size}：上マージン
• mr-{size}：右マージン
• mb-{size}：下マージン
• ml-{size}：左マージン
• -m-{size}：負のマージン
• m-auto：自動マージン（中央揃え）

パディングクラス

• p-{size}：全辺のパディング
• px-{size}：水平方向（左＋右）
• py-{size}：垂直方向（上＋下）
• pt-{size}：上パディング
• pr-{size}：右パディング
• pb-{size}：下パディング
• pl-{size}：左パディング

論理ブロック軸クラス（v4.2 以降）

• mbs-{size} / mbe-{size}：margin-block-start / margin-block-end
• pbs-{size} / pbe-{size}：padding-block-start / padding-block-end
• インライン軸の対応クラス：ms-*/me-*、ps-*/pe-*

子要素間のスペース

• space-x-{size}：フレックス／グリッドの子要素間の水平方向のスペース
• space-y-{size}：フレックス／グリッドの子要素間の垂直方向のスペース

スペーシングスケール

Tailwind CSS v4.3 では、--spacing を基準単位（デフォルト：0.25rem/4px）とする、設定可能なスペーシングスケールを使用します。v4.3.1 以降では、*-0 は 0 を、*-1 は calc() ではなく var(--spacing) を出力します。

クラス	値
0	0
px	1px
0.5	calc(var(--spacing) * 0.5) = 0.125rem
1	var(--spacing) = 0.25rem
2	calc(var(--spacing) * 2) = 0.5rem
3	calc(var(--spacing) * 3) = 0.75rem
4	calc(var(--spacing) * 4) = 1rem
6	calc(var(--spacing) * 6) = 1.5rem
8	calc(var(--spacing) * 8) = 2rem
12	calc(var(--spacing) * 12) = 3rem
16	calc(var(--spacing) * 16) = 4rem

よく使われるパターン

中央揃えのコンテナ

<div class="mx-auto">Centered content</div>

パディング付きカード

<div class="p-6 bg-white rounded-lg shadow">Card content</div>

スペースを設けたフレックスアイテム

<div class="flex space-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

垂直方向にスペースを設けたスタック

<div class="space-y-4">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

詳しいリファレンス：

• マージンユーティリティ →
• パディングユーティリティ →