自定义间距

在你的 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',
      }
    }
  }
}

这将生成像 p-13、m-15 和 h-128 这样的类，除此之外还包括 Tailwind 的所有默认间距/尺寸工具类。

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