Tailwind CSSのwidthなどに使える幅の値を増やす

はじめに

Tailwind CSS では default-spacing-scale に定義された値を width や padding 等に利用することができます。

default-spacing-scale では 0.5 刻みがあるのは 3.5 まで、整数があるのは 96 までですがもう少し大きい値を使いたい場面があるので、サンプルとして 4.5~300 までの値を 0.5 刻みで追加してみます。

検証バージョン: Tailwind CSS v3.3.0

spacing の値を追加する設定

tailwind.config.ts に以下の設定を行い、 spacing の値を追加します。

tailwind.config.ts

const maxSpacing = 300; // ここを追加

const config: Config = {
  theme: {
    extend: {
      // ここを追加
      spacing: {
        ...Array.from({ length: maxSpacing * 2 - 8 }, (_, i) => i * 0.5 + 4.5)
          .reduce((acc, curr) => {
            acc[curr] = 0.25 * curr + 'rem';
            return acc;
          }, {} as Record<string, string>)
      },
      // ...
    }
  }
};
export default config;

変更後の動作

0.5刻みの値が300まで使えるようになりました

<div className="whitespace-nowrap [&>div]:bg-red-400">
  <div className="w-4.5">w-4.5</div>
  <div className="w-96.5">w-96.5</div>
  <div className="w-100">w-100</div>
  <div className="w-200">w-200</div>
  <div className="w-300">w-300</div>
</div>

補足

Tailwind 4.x系では下記のように calc(var(--spacing) * value) 形式で計算するようになるので本記事の spacing を追加する対応は不要になっています。

.w-300 {
    width: calc(var(--spacing) * 300);
}