定制间距

在您的 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。

Name	Size	Pixels
0	0px	0px
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
11	2.75rem	44px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
52	13rem	208px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px

扩展默认的间距比例

覆盖默认间距比例

默认间距比例

本页目录