Tailwindスペーシング

design/tailwind-spacing

Tailwind CSSのスペーシング値(p-/m-/gap-)とpx値の対応表。

最終更新日 2026-07-03 ・ by yuzlrin

このツールでできること

Tailwindスペーシングは、Tailwindスペーシングの用途、入力、出力を確認しながら日常作業を短時間で処理するためのページです。
入力例と結果を見比べながら、入力条件と出力形式が利用先に合っているか確認することができます。
Tailwindスペーシングでは、Tailwind CSSのスペーシング値(p-/m-/gap-)とpx値の対応表。
デザイン・CSSの作業で必要になりやすい「CSS、レイアウト、UI部品の設定値作成」を、ページ上の入力欄からすぐに試せます。
関連する観点として Tailwind spacing、余白、パディングを確認し、結果をコピーして別の作業に使えます。

入力

結果

クラス  px     rem     使用例
─────────────────────────────
0      0      0       p-0
0.5    2px    0.125   p-0.5
1      4px    0.25    p-1, m-1
1.5    6px    0.375   p-1.5
2      8px    0.5     p-2, gap-2
2.5    10px   0.625   p-2.5
3      12px   0.75    p-3, m-3
3.5    14px   0.875   p-3.5
4      16px   1       p-4, gap-4
5      20px   1.25    p-5
6      24px   1.5     p-6, gap-6
7      28px   1.75    p-7
8      32px   2       p-8, gap-8
9      36px   2.25    p-9
10     40px   2.5     p-10
11     44px   2.75    p-11
12     48px   3       p-12
14     56px   3.5     p-14
16     64px   4       p-16
20     80px   5       p-20
24     96px   6       p-24
32     128px  8       p-32
40     160px  10      p-40
48     192px  12      p-48
56     224px  14      p-56
64     256px  16      p-64
72     288px  18      p-72
80     320px  20      p-80
96     384px  24      p-96

使い方

Tailwindスペーシングの入力欄に、確認したい文字列や数値を入れます。
必要なオプションがある場合は、用途に合わせて選択します。
表示された結果を確認し、問題がなければコピーして利用先へ貼り付けます。

入力例・出力例

INPUT

Tailwindスペーシング

OUTPUT

Tailwindスペーシングの処理結果

入力条件と出力形式が利用先に合っているか確認する

よくある利用シーン

デザイン案を素早く試し、実装に貼りやすい値を作りたいとき
Tailwind spacing、余白、パディングに関する確認を、手元のメモやスプレッドシートを開かずに短時間で済ませたいとき。
Tailwindスペーシングの結果を、レビュー、公開前チェック、日々の作業メモに流用したいとき。

結果確認のポイント

入力条件と出力形式が利用先に合っているか確認する
生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
Tailwind spacing、余白、パディングの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

結果を確認せずに本番データへそのまま反映する
ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

Tailwindスペーシングの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

FAQ

よくある質問

Tailwindスペーシングは何に使えますか？

TailwindスペーシングはTailwindスペーシングの用途、入力、出力を確認しながら日常作業を短時間で処理するための無料ツールです。入力内容を確認しながら、結果をコピーして日々の作業に使えます。

入力したデータは保存されますか？

多くの処理はブラウザ内で完結します。サーバー処理が必要な場合も、必要な処理の範囲に限って扱います。秘密情報や個人情報は入力前に必要性を確認してください。

結果を使う前に何を確認すべきですか？

入力条件と出力形式が利用先に合っているか確認する

Tailwindのスペーシング値とpxの対応は？

基本は0.25rem(4px)刻みです。例: p-1=0.25rem(4px)、p-2=0.5rem(8px)、p-4=1rem(16px)、p-6=1.5rem(24px)、p-8=2rem(32px)。padding(p-)・margin(m-)・gap-・space- などに共通のスケールが使われます。

スケールにない任意の余白を使うには？

p-[13px] や mt-[3.5rem] のように角括弧の任意値(arbitrary value)で指定できます。ただしデザインの統一感のため、まずは標準スケールの利用が推奨されます。

remとpxどちらの基準ですか？

Tailwindのspacingはrem基準で、デフォルトのルートフォントサイズ16pxを前提に px換算しています(4px=0.25rem)。ユーザーがブラウザの文字サイズを変えると実寸も比例して変わります。

Tailwindスペーシング

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール

Tailwindスペーシング

このツールでできること

使い方

入力例・出力例

よくある利用シーン

結果確認のポイント

注意点

データの扱い / プライバシー

よくある質問

関連ツール