https://github.com/mattrothenberg/tailwindcss-stack-plugin

A Tailwind plugin for custom "stack" utility classes
https://github.com/mattrothenberg/tailwindcss-stack-plugin

Last synced: 3 months ago
JSON representation

A Tailwind plugin for custom "stack" utility classes

• Host: GitHub
• URL: https://github.com/mattrothenberg/tailwindcss-stack-plugin
• Owner: mattrothenberg
• Created: 2020-03-25T12:11:21.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-26T09:23:51.000Z (over 2 years ago)
• Last Synced: 2024-06-30T21:56:05.011Z (4 months ago)
• Language: JavaScript
• Homepage: https://rzpuh.sse.codesandbox.io/
• Size: 62.5 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## tailwindcss-stack-plugin

A Tailwind plugin for custom "stack" utility classes.1

**Demo**: https://rzpuh.sse.codesandbox.io/

## Installation

```bash

yarn add tailwind-stack-plugin --dev

```

## Tailwind Configuration

In your `tailwind.config.js`, be sure to:

- Require the plugin

- Define at least (1) `stack` theme value

- Specify which variant(s) you want to apply to the `.stack-*` classes

```js

module.exports = {

  theme: {

    stack: {

      sm: "8px",

      md: "16px",

      lg: "24px",

      xl: "48px"

    },

  },

  variants: {

    stack: ["responsive"]

  },

  plugins: [require("tailwind-stack-plugin")]

};

```

## Usage (Vertical)

```html



  


    Vertical Stack

  

  


    


    


    


    


  



```




## Usage (Inline)

```html



  


    Inline Stack

  

  


    


    


    


    


  



```




---

1 What's a "stack?" :thinking:

As the [war on margin](https://mxstbr.com/thoughts/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).

```jsx

// Credit: https://mxstbr.com/thoughts/margin

  

  

  

```

Prior Art

- https://seek-oss.github.io/braid-design-system/components/Stack/

- https://every-layout.dev/layouts/stack/

- https://chakra-ui.com/stack