Tailwind Configでカスタムスペーシングスケール

Tailwindでのカスタムスペーシング

Tailwindのスペーシングスケールは、margin（m-*）、padding（p-*）、gap（gap-*）、width（w-*）、height（h-*）ユーティリティを制御します。

スケールの拡張

カスタム値を追加すると、p-128、w-144、mt-4.5などが使えるようになります。

カスタム単位の使用

スペーシング値はremに限定されません。任意のCSS単位を使用できます。

名前付きスペーシングトークン

デザインシステムでは、名前付きトークンが可読性を向上させます。

Extend vs Override

拡張するとデフォルトと並んで値が追加されます。上書きすると、定義した値のみが存在し、デフォルトのスペーシングクラスがすべて削除されます。