Tailwind CSS 主页
  1. 自定义
  2. 自定义间距

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

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

扩展默认间距比例

如主题文档中所述，如果你想扩展默认间距比例，可以使用 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',
      }
    }
  }
}

这将生成 p-13、m-15 和 h-128 等类，以及所有 Tailwind 的默认间距/尺寸实用工具。

覆盖默认间距比例

如主题文档中所述，如果你想覆盖默认间距比例，可以使用 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-sm、m-md、w-lg 和 h-xl 的类。

默认间距比例

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

名称大小像素
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