Tailwind CSSを使っていて、こんなことはありませんか？
- デザインに「22px」という中途半端な数値が出てきて、渋々
mt-[22px]と書く - デザイン調整でArbitrary valuesだらけになって、可読性が下がる
- レビュー時に「この
px-6って何pxだっけ？」と計算し直す
今回は、--spacingを1px相当に定義することで、デザインの再現度と実装スピードを同時に引き上げる方法を紹介します。
--spacingの再定義
Tailwind CSS v4の大きな変更点は、設定がJSからCSS（@themeブロック）へ移ったことです。そのため、プロジェクトの基盤となるCSSファイルに以下を追加するだけで、すべてのスペーシング・ユーティリティが「1px相当ベース」に変わります。
@theme {
--spacing: 0.0625rem; /* 1px相当 (1/16rem) */
}
なぜ 0.0625remなのか？
ブラウザのデフォルトフォントサイズは通常 1rem = 16px です。なので、1px をrem換算すると以下になります。
1px ÷ 16px = 0.0625remこの定義により、Tailwindの計算ロジックがシンプルになります。
- デフォルト: 数値 × 0.25rem (4px) →
p-4は16px - 1px設定: 数値 × 0.0625rem (1px) →
p-16は16px（見たままの数値になります）
メリット
デザインとコードが一致する
Figmaのプロパティパネルに表示された数値をそのまま打ち込めるので、実装時の迷いが無くなり実装スピードがあがります。
my-32→ 32pxの上下マージンpx-16→ 16pxの左右パディングmax-w-640→ 640pxの最大幅
コードの可読性が上がる
記述した数値がそのままの値となるため、p-[13px]や top-[21px]といった任意値（Arbitrary values）を使う必要がなくなります。
クラス名が標準的な記法に統一されるので、HTMLがスッキリしますし、後から見直した時も意図がすぐ分かります。
レビューが楽になる
「この p-6 って何pxだっけ？」と考えたりすることが無くなります。コードに mt-24とあれば、シンプルに24pxであることを確認するだけになるので、分かりやすさく、チーム全体でレビューがしやすくなります。
デメリット
デフォルトのスケールが使えない
Tailwind CSS標準のp-1 (4px)などの感覚は捨てなければなりません。Tailwind CSSを使い慣れていると、最初は逆に混乱する可能性があります。
デザインシステムの制約が弱まる
自由度が高まる分、Tailwind CSS本来のデザインシステムとしての担保が崩れやすくなります。サイト全体でかっちりと「4の倍数」という規律でspacingが決まっている場合は、設定から外れる値を見分けづらくなってしまうため、使わないほうが好ましいです。
まとめ
Tailwind CSSのデザインシステムを用いて「4の倍数」という規律に従うことも一つのやり方ですが、Figmaの数値をそのままコードに落とし込める「直感的な1px単位」がもたらす開発体験と品質の向上は、多くのプロジェクトで強力な武器になるかと思うので、一度お試しください。
参照
https://zenn.dev/amon/articles/c928d3a5faa955
https://tailwindcss.com/docs/padding
https://tailwindcss.com/docs/margin
