Customizing Spacing
The theme.spacing
section of your tailwind.config.js
file allows you to override Tailwind’s default spacing/sizing scale.
// tailwind.config.js
module.exports = {
theme: {
spacing: {
'1': '8px',
'2': '12px',
'3': '16px',
'4': '24px',
'5': '32px',
'6': '48px',
}
}
}
By default the spacing scale is shared by the padding, margin, width, and height utilities so the above configuration would generate classes like
t.p2
,
t.mT3
,
t.w5
,
t.h6
, etc.
Overriding the default spacing scale
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:
// tailwind.config.js
module.exports = {
theme: {
spacing: {
sm: '8px',
md: '12px',
lg: '16px',
xl: '24px',
}
}
}
This will disable Tailwind’s default spacing scale and generate classes like
t.pSm
,
t.mMd
,
t.wLg
,
and t.hXl
instead.
Extending the default spacing scale
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:
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'72': '18rem',
'84': '21rem',
'96': '24rem',
}
}
}
}
This will generate classes like
t.p72
,
t.m84
,
and t.h96
in addition to all of Tailwind’s default spacing/sizing utilities.
Default spacing scale
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 | |
---|---|---|---|
0 | 0 | 0 | |
px | px | px | |
1 | 0.25rem | 1 | |
2 | 0.5rem | 2 | |
3 | 0.75rem | 3 | |
4 | 1rem | 4 | |
5 | 1.25rem | 5 | |
6 | 1.5rem | 6 | |
8 | 2rem | 8 | |
10 | 2.5rem | 10 | |
12 | 3rem | 12 | |
16 | 4rem | 16 | |
20 | 5rem | 20 | |
24 | 6rem | 24 | |
32 | 8rem | 32 | |
40 | 10rem | 40 | |
48 | 12rem | 48 | |
56 | 14rem | 56 | |
64 | 16rem | 64 |