定制化
自定义项目的默认间距和大小比例。
使用 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.
名称 | 尺寸 | 像素 | Preview |
---|---|---|---|
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 |