カスタマイジングスペース

プロジェクトのデフォルトのスペーシングスケールをカスタマイズします


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 ユーティリティによって共有されます。 したがって、上記の構成では、.p-2, .mt-3, .w-5, .h-6などのクラスが生成されます。


Overriding the default spacing scale

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などのクラスが生成されます。


Extending the default spacing scale

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  }
}

これにより、Tailwindのデフォルトのスペース/サイズ設定ユーティリティのすべてに加えてp-72,m-84およびh-96などのクラスが生成されます。


Default spacing scale

デフォルトでは、Tailwindには寛大で包括的な数値スペーシングスケールが含まれています。

値は比例しているため、たとえば168の2倍の間隔になります。 1つの間隔の単位は0.25remに等しく、一般的なブラウザではデフォルトで4pxに変換されます。

NameSizePixels
000px
px1px1px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!