Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法をご紹介します。

なお、本稿ではv4.1（2025年4月14日時点の最新版）のTailwind CSSを前提とします。

実現したいこと

冒頭、実現したいことを整理します。

Tailwind CSSでは、スペーシングのベースサイズは0.25rem（4px相当）とデフォルトで設定されています。

例えば、paddingはp-<number>の形式のユーティリティクラスでスタイリングします。

以下のように、p-4と記述した場合、0.25*4でpadding: 1rem;（16px相当）が出力値となります。

<!-- 0.25*4で padding: 1rem;になる -->
<div class="p-4"></div>

プロジェクトによっては、この0.25remというベースサイズをカスタマイズしたいシーンがあるかもしれません。

今回実現したいのは、スペーシングのベースサイズを0.25remから1pxに変更することです。

スペーシングのベースサイズをカスタマイズする方法

スペーシングのベースサイズをカスタマイズしたい場合、テーマ変数の値を変更することで実現できます。

ベースサイズ用のテーマ変数は--spacingです。

tailwindcss.com

@import "tailwindcss";が宣言されたTailwind CSSの設定ファイル内の@themeレイヤーに次のように記述します。

@import "tailwindcss";

@theme {
  --spacing: 1px;
}

これにより、p-4と記述した場合、1*4でpadding: 4px;が出力値となります。

<!-- 1*4で padding: 4px;になる -->
<div class="p-4"></div>

仕組み

簡単に仕組みをご説明します。

padding用のユーティリティクラス、p-<number>の実態は以下のようになっています。

/* `p-<number>` */
padding: calc(var(--spacing) * <number>);

calc()を用いて、CSS変数の--spacingに数字を掛け算しています。

まとめ

今回は、Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法をご紹介しました。

既にデザインシステムが設計されたプロジェクトの場合、Tailwind CSSのデフォルト設定と噛み合わないこともあると思いますが、テーマ変数によって柔軟にカスタマイズができます。

また、v4からはCSS-first configurationにより、設定方法がJSからCSSに記述する方式になったため、デザイナーにも馴染みやすくなったと思います。

Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。

参考文献

• padding - Spacing - Tailwind CSS