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

`tailwind.config.js` ファイルの `theme` セクションにある `spacing` キーを使用して、Tailwind のデフォルトのスペーシング/サイジングスケールをカスタマイズします。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

デフォルトでは、スペーシングスケールは`padding`、`margin`、`width`、`minWidth`、`maxWidth`、`height`、`minHeight`、`maxHeight`、`gap`、`inset`、`space`、`translate`、`scrollMargin`、`scrollPadding` のコアプラグインによって継承されます。

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

テーマのドキュメントで説明されているように、デフォルトのスペーシングスケールを拡張したい場合は、`tailwind.config.js` ファイルの `theme.extend.spacing` セクションを使用します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

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

​デフォルトのスペーシングスケールのオーバーライド

テーマのドキュメントで説明されているように、デフォルトのスペーシングスケールをオーバーライドしたい場合は、`tailwind.config.js` ファイルの `theme.spacing` セクションを使用します。

/** @type {import('tailwindcss').Config} */
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` に変換されます。