定制
Customizing the default spacing and sizing scale for your project.
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',
}
}
}
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.
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',
}
}
}
}
This will generate classes like p-13
, m-15
, and h-128
in addition to all of Tailwind’s default spacing/sizing utilities.
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',
}
}
}
This will disable Tailwind’s default spacing scale and generate classes like p-sm
, m-md
, w-lg
, and h-xl
instead.
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.
Name | Size | Pixels | 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 |