Tailwind CSS 间距

定制间距

为您的项目定制默认间距和大小比例。

在您的 ​tailwind.config.js​ 文件的 ​theme​ 部分使用 ​spacing ​键来定制 Tailwind 的默认间距/大小比例。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

默认情况下，间距比例由 padding、 margin、 width、 height、 maxHeight、 gap、 inset、 space 和 translate 核心插件继承。

扩展默认的间距比例

正如 主题文档 中所描述的那样，如果您想扩展默认的间距，您可以使用您的 ​tailwind.config.js​ 文件中的 ​theme.extend.spacing​ 部分来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

这将生成像 p-13、m-15 和 h-128 这样的类，除了所有 Tailwind 的默认间距/大小功能类。

覆盖默认间距比例

正如 主题文档 中所描述的，如果您想覆盖默认的间距，您可以使用您的 ​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 这样的类。

默认间距比例

默认情况下，Tailwind 包括一个丰富和全面的数字间隔比例。这些值是成比例的，所以 16 是 8 的两倍。一个间距单位等于 0.25rem，在通用浏览器中默认为 4px。