Description
The spacing plugin extends the built in Tailwind spacing config and allows you to create preset responsive spacing groups. It will generate single class names following Tailwinds spacing classes for margin and padding which have responsive spacing instead of single fixed spacing.
Similiar to responsive typesets, at AREA 17 we like responsive spacing classes so that the spacing between components can be known and predictable. We don't use these for all components but we create rules to space full page width type blocks, or sections, or title bars from other content and then responsive spacing classes help us stay consistent between all these block types across all layouts and pages.
Setup
const { Spacing } = require('@area17/a17-tailwind-plugins');
module.exports = {
...
plugins: [Spacing],
theme: {
spacingGroups: {
"outer-1": {
"xs": 64,
"lg": 96
},
"inner-1": {
"xs": 24,
"md": 40,
"lg": 64
},
"inner-2": {
"xs": 16,
"md": 24,
"lg": 32
}
}
}
...
};
Note: from 5.0.1
you can specify strings such as clamp(64px, 64px + 1vw, 200px)
.
Output
:root
variables that this plugin to use in styling classes.
For example, based on the reference config mentioned in this
guide, we get:
:root {
--spacing-outer-1: 4rem;
--spacing-inner-1: 1.5rem;
--spacing-inner-2: 1rem;
}
@media (min-width: 650px) {
:root {
--spacing-inner-1: 2.5rem;
--spacing-inner-2: 1.5rem;
}
}
@media (min-width: 990px) {
:root {
--spacing-outer-1: 6rem;
--spacing-inner-1: 4rem;
--spacing-inner-2: 2rem;
}
}
And then a series of margin and padding Tailwind classes to correspond to these. For example:
.mt-outer-1 {
margin-top: var(--spacing-outer-1);
}
.pt-inner-1 {
padding-top: var(--spacing-inner-1);
}
m-
, mx-
, my-
, mt-
,
mb-
, ml-
, mr-
, p-
,
px-
, py-
, pt-
, pb-
,
pl-
, pr-
classes will also be created, with appropriate negative classes. And CSS logical property class name: ms-
, me-
, ps-
, pe-
, start-
and end-
, with appropriate negative classes.
Demo
The following div
has classes mt-outer-1
and
p-inner-1
and if you resize the window you will see the top
margin and inner padding will change in size as the browser window changes
size through the different breakpoints.
Content
<div class="mt-outer-1 p-inner-1 bg-column">
<div class="bg-primary copy p-inner-1">
<p>Content</p>
</div>
</div>
As this plugin generates CSS responsive custom properties, you can also use these directly in Tailwind 4's <custom-property>
spacing.
Note: Tailwind 4 updated how it handles arbitrary values.
Content
<div class="mt-(--spacing-outer-1) p-(--spacing-inner-1) bg-column">
<div class="bg-primary copy p-(--spacing-inner-1) ">
<p>Content</p>
</div>
</div>
Negative values are also available, eg: -mt-(--spacing-outer-1)