A17 Tailwind Plugins

Description

This plugin creates classes to handle responsive grid gutters:

.gap-gutter
.gap-y-gutter
.gap-x-gutter

Which are responsive CSS grid gutters to complement Tailwind's grid-gap.

Setup

tailwind.config.js

const { Setup, GridGap } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Setup, GridGap],
  theme: {
    innerGutters: {
      xs: "10px",
      sm: "15px",
      md: "20px",
      lg: "30px",
      xl: "40px",
      xxl: "40px"
    },
  }
  ...
};

Requires Setup plugin with theme.innerGutters configured.

Demo

Mixing in with standard Tailwind grid type classes, we use gap-x-gutter to set the grid's column gutter:

document.html

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-20  gap-x-gutter">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Much like Tailwind's grid-gap, you can prefix these classes per breakpoint, state etc.

document.html

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-20 gap-x-0 md:gap-x-gutter lg:gap-x-0 xl:gap-x-gutter">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>