1. 定制
  2. 自定义间距

Use the spacing key in the theme section of your tailwind.config.js file to customize Tailwind’s default spacing/sizing scale.

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

默认情况下,间距比例由 paddingmarginwidthminWidthmaxWidthheightminHeightmaxHeightgapinsetspacetranslatescrollMarginscrollPadding 核心插件继承。


扩展默认间距比例

theme documentation 中所述,如果您想扩展默认间距比例,可以使用 tailwind.config.js 文件的 theme.extend.spacing 部分来实现:

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

除了 Tailwind 的所有默认间距/大小实用程序之外,这还将生成诸如 p-13m-15h-128 之类的类。


覆盖默认间距比例

theme documentation 中所述,如果您想覆盖默认间距比例,您可以使用 tailwind.config.js 文件的 theme.spacing 部分来实现:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

这将禁用 Tailwind 的默认间距比例并生成诸如 p-smm-mdw-lgh-xl 之类的类。


默认间距比例

默认情况下,Tailwind 包含一个慷慨而全面的数字间距标度。这些值是成比例的,因此例如 16 的间距是 8 的两倍。一个间距单位等于 0.25rem,在常见浏览器中默认转换为 4px

NameSizePixels
00px0px
px1px1px
0.50.125rem2px
10.25rem4px
1.50.375rem6px
20.5rem8px
2.50.625rem10px
30.75rem12px
3.50.875rem14px
41rem16px
51.25rem20px
61.5rem24px
71.75rem28px
82rem32px
92.25rem36px
102.5rem40px
112.75rem44px
123rem48px
143.5rem56px
164rem64px
205rem80px
246rem96px
287rem112px
328rem128px
369rem144px
4010rem160px
4411rem176px
4812rem192px
5213rem208px
5614rem224px
6015rem240px
6416rem256px
7218rem288px
8020rem320px
9624rem384px