1. 定制化
  2. 自定义间距

使用 tailwind.config.js 文件的 theme 部分中的 spacing 键自定义 Tailwind 的 默认间距/大小比例

¥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 核心插件继承。

¥By default the spacing scale is inherited by the padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins.


扩展默认间距比例

¥Extending the default spacing scale

主题文档 中所述,如果你想扩展默认间距比例,你可以使用 tailwind.config.js 文件的 theme.extend.spacing 部分执行此操作:

¥As described in the theme documentation, if you’d like to extend the default spacing scale, you can do so using the theme.extend.spacing section of your tailwind.config.js file:

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 等类。

¥This will generate classes like p-13, m-15, and h-128 in addition to all of Tailwind’s default spacing/sizing utilities.


覆盖默认间距比例

¥Overriding the default spacing scale

主题文档 中所述,如果你想覆盖默认间距比例,你可以使用 tailwind.config.js 文件的 theme.spacing 部分执行此操作:

¥As described in the theme documentation, if you’d like to override the default spacing scale, you can do so using the theme.spacing section of your tailwind.config.js file:

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 等类。

¥This will disable Tailwind’s default spacing scale and generate classes like p-sm, m-md, w-lg, and h-xl instead.


默认间距比例

¥Default spacing scale

默认情况下,Tailwind 包含一个宽大而全面的数字间距比例。这些值是成比例的,例如,16 的间距是 8 的两倍。一个间距单位等于 0.25rem,一般浏览器默认转变成 4px

¥By default, Tailwind includes a generous and comprehensive numeric spacing scale. The values are proportional, so 16 is twice as much spacing as 8 for example. One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

名称尺寸像素
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