TailwindCSS plugin to generate classes for setting fixed space between containers child elements.

  • By n1kk
  • Last update: Apr 21, 2022
  • Comments: 1

This plugin generates a set of css classes to add fixed margins to container children, except last one, to spread content in a consistent manner.

This can be useful when you want to spread items in the container with a set interval but don't want to add margins to every child manually and remove it from last child to make separation look proper.

Install

yarn

yarn add tailwindcss-spaced-items

npm

npm i tailwindcss-spaced-items

API

spacedItems({ values, children = ['*']} = {})

  • values: [optional] an object with values to generate classes, defaults to configs 'margin' object values. If config does not contain margin values you have to pass your own values for classes to be generated.
  • children: [optional] array of selectors of which child tags should be affected, defaults to ['*']

Usage

In tailwind config

const spacedItems = require('tailwindcss-spaced-items')
module.exports = {
  plugins: [
    spacedItems(),
  ],
}

This will produce css like this for each value in configs margin object:

.spaced-x-1 > * { margin-right: .25rem; }
.spaced-x-1 > *:last-child { margin-right: 0; }
.spaced-y-1 > * { margin-bottom: .25rem; }
.spaced-y-1 > *:last-child { margin-bottom: 0; }
.spaced-xy-1 > * { margin-bottom: .25rem;
                   margin-right: .25rem; }
.spaced-xy-1 > *:last-child { margin-bottom: 0;
                              margin-right: 0; }

/* ... */

To override values:

const spacedItems = require('tailwindcss-spaced-items')
module.exports = {
  plugins: [
    spacedItems({
      values: {
        '1': '1px',
        '5': '5px',
        '10': '10px',
        '20': '20px',
      },
    }),
  ],
}

This will produce:

.spaced-x-1 > * { margin-right: 1px; }
.spaced-x-1 > *:last-child { margin-right: 0; }

/* ... */

To define a child tag:

const spacedItems = require('tailwindcss-spaced-items')
module.exports = {
  plugins: [
    spacedItems({
      children: ['div', 'p'],
    }),
  ],
}

This will produce:

.spaced-x-1 > div, 
.spaced-x-1 > p {
  margin-right: .25rem; 
}
.spaced-x-1 > div:last-child, 
.spaced-x-1 > p:last-child 
{ 
  margin-right: 0; 
}

/* ... */

Github

https://github.com/n1kk/tailwindcss-spaced-items

Comments(1)

  • 1

    Stop 'auto' value from being removed

    I've found an issue whilst using this plugin, in that I can no longer use @apply with the mx-auto class. It works with any other margin classes, just not with auto. It also breaks my layout as the mx-auto class is removed from my compiled CSS.

    Here's a snippet of my Sass:

    .faq-wrapper
      @apply w-full px-4 mx-auto
    

    When attempting to compile Tailwind:

    (83:3) `@apply` cannot be used with `.mx-auto` because `.mx-auto` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.mx-auto` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
    

    Having looks at index.js, the issue is with this line:

    delete values['auto']
    

    It seems that removing auto from values it also removes it from config.

    I've replaced this with the following which fixed the problem:

    - values = config('margin')
    + values = Object.assign({}, config('margin'))