【Tailwind和訳】CUSTOMIZATION/Spacing

この記事について

この記事は、CUSTOMIZATION/Spacingの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

スペーシングのカスタマイズ

あなたのプロジェクトのために、デフォルトのスペーシングとサイジングのスケールをカスタマイズします。

---

tailwind.config.jsファイルのthemeセクションにあるspacingキーを使って、Tailwind の default spacing/sizing scaleをカスタマイズします。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      1: "8px",
      2: "12px",
      3: "16px",
      4: "24px",
      5: "32px",
      6: "48px",
    },
  },
}

デフォルトでは、スペーシングのスケールは、padding、margin、width、height、maxHeight、gap、inset、space、translateの各コアプラグインに継承されます。

---

デフォルトのスペーシングスケールの拡張

theme documentationに記載されているように、デフォルトのスペーシング・スケールを拡張したい場合は、tailwind.config.jsファイルのtheme.extend.spacingセクションを使用して行うことができます。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        13: "3.25rem",
        15: "3.75rem",
        128: "32rem",
        144: "36rem",
      },
    },
  },
}

これにより、Tailwind のデフォルトのスペーシング／サイジングユーティリティーに加えて、p-13、m-15、h-128といったクラスが生成されます。

---

デフォルトのスペーシング・スケールをオーバーライドする

theme documentationで説明されているように、デフォルトのスペーシング・スケールをオーバーライドしたい場合は、tailwind.config.jsファイルのtheme.spacingセクションを使って行うことができます。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: "8px",
      md: "12px",
      lg: "16px",
      xl: "24px",
    },
  },
}

これは、Tailwind のデフォルトのスペーシングスケールを無効にし、代わりにp-sm、m-md、w-lg、h-xlのようなクラスを生成します。

---

デフォルトのスペーシングスケール

デフォルトでは、Tailwind には寛大で包括的な数値によるスペーシング・スケールが含まれています。値は比例しており、例えば16は8の 2 倍のスペーシングとなります。1 つのスペーシングユニットは0.25remに相当し、一般的なブラウザではデフォルトで4pxに変換されます。

---