➗

割り算を頑張らない Tailwind CSS

に公開
Tailwind CSS
tech

Tailwind CSS でデフォルトで設定されている、幅、高さ、余白などの Spacing 単位は、1 = 0.25rem = 4px です。
例えば w-4 が示すのは、width: 1rem すなわち width: 16px です。

Figma などのデザインデータを見ると、width: 100px とか padding: 16px 24px とか書いてあるわけで、実装時には 4で割る必要があります。
割り算なんかで頭を使いたくありません。ここが個人的に Tailwind CSS の嫌いなところです。

1 = 1px に

今すぐ tailwind.config.ts を書き換えましょう。

tailwind.config.ts
export default {
  theme: {
    spacing: {
      ...Object.fromEntries(
        [...Array(401)].map((_, i) => i).map((num) => [num, `${num}px`]),
	// rem なら
        // [...Array(401)].map((_, i) => i).map((num) => [num, `${num / 16}rem`]),
      ),
    },
  }
} satisfies Config;

これで 0 ~ 400px まで、px の数値で指定できるようになりました。
800px が欲しければ、801 にすればいいだけです。

半端な数値を許可したくない場合

tailwind.config.ts
export default {
  theme: {
    spacing: {
      ...Object.fromEntries(
        [...Array(101)].map((_, i) => i * 4).map((num) => [num, `${num}px`]),
	// rem なら
        // [...Array(101)].map((_, i) => i * 4).map((num) => [num, `${num / 16}rem`]),
      ),
    },
  }
} satisfies Config;

これで、0 ~ 400px まで、1 = 1px を保ちつつ 4px 単位のみクラスを指定できるようになりました。

Discussion