tailwindcss-stack-plugin
A Tailwind plugin for custom "stack" utility classes.1
Demo: https://rzpuh.sse.codesandbox.io/
Installation
yarn add tailwind-stack-plugin --devTailwind Configuration
In your tailwind.config.js, be sure to:
- Require the plugin
- Define at least (1)
stacktheme value - Specify which variant(s) you want to apply to the
.stack-*classes
module.exports = {
theme: {
stack: {
sm: "8px",
md: "16px",
lg: "24px",
xl: "48px"
},
},
variants: {
stack: ["responsive"]
},
plugins: [require("tailwind-stack-plugin")]
};Usage (Vertical)
<div class="stack-sm">
<h1 class="tracking-tight text-white text-lg font-bold">
Vertical Stack
</h1>
<div class="stack-sm md:stack-md lg:stack-lg xl:stack-xl">
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
</div>
</div>
Usage (Inline)
<div class="stack-sm">
<h1 class="tracking-tight text-white text-lg font-bold">
Inline Stack
</h1>
<div
class="stack-inline-sm md:stack-inline-md lg:stack-inline-lg xl:stack-inline-xl"
>
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
<div class="border-2 border-white p-4"></div>
</div>
</div>
1 What's a "stack?" 🤔
As the war on margin continues on, front-end developers have invented clever ways of decoupling spacing details from their component implementations.
One such abstraction is the stack component – a parent node that leverages the cascade to ensure that its children are equally spaced apart (either vertically or horizontally).
// Credit: https://mxstbr.com/thoughts/margin
<Stack space={3}>
<Item />
<Item />
<Item />
</Stack>Prior Art