Spacing

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
      }
    }
  }
  ...
};

Output

These classes are linked to :root variables that this plugin also makes. 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.

From 4.0.5, CSS logical property class names are also generated - 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.