主要ブラウザでの互換性はどうですか？

Tailwindスペーシングの出力はChrome、Safari、Firefox、Edgeの最新版で動作します。古いブラウザ対応が必要な場合はCaniuse.comで各プロパティの対応状況を確認してください。

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

デザイン・CSS無料登録不要

Tailwindスペーシング

Tailwind CSSのスペーシング値(p-/m-/gap-)とpx値の対応表。レイアウト設計に便利な無料オンラインツール。

Input

Result

クラス  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

FAQ

よくある質問

はい。Tailwindスペーシングはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

こちらもおすすめ

CSS letter-spacing

CSS letter-spacingプロパティを生成する無料オンラインツール。

スペーシングスケール

一般的なスペーシングスケール値を一覧表示する無料オンラインツール。

CSS→Tailwind変換

CSSプロパティを対応するTailwindCSSクラスに変換。Tailwindへの移行・学習に便利な無料オンラインツール。

CSS word-spacing

CSS word-spacingプロパティを生成する無料オンラインツール。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...