自定义间距

使用 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.

/** @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 核心插件继承。

¥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:

/** @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 等类。

¥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:

/** @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 等类。

¥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.