@area17/a17-tailwind-plugins/src/GridGap/index.js

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

module.exports = function ({ addUtilities, prefix }) {
  const className = prefix('.gap-gutter');
  const classNameY = prefix('.gap-y-gutter');
  const classNameX = prefix('.gap-x-gutter');

  let styles = {
    [className]: {
      'grid-gap': 'var(--inner-gutter)',
      gap: 'var(--inner-gutter)',
    },
    [classNameY]: {
      'grid-row-gap': 'var(--inner-gutter)',
      'row-gap': 'var(--inner-gutter)',
    },
    [classNameX]: {
      'grid-column-gap': 'var(--inner-gutter)',
      'column-gap': 'var(--inner-gutter)',
    },
  };

  addUtilities(styles, {
    respectPrefix: false,
  });
};