@evanwinter/tailwind-plugin-gutter

A Tailwind CSS plugin that adds a semantic, responsive gutter spacing utility you can use like mx-gutter, py-gutter, -m-gutter, etc.

Installation

npm install @evanwinter/tailwind-plugin-gutter

Usage

// tailwind.config.ts
import gutterPlugin from "@evanwinter/tailwind-plugin-gutter";

export default {
  theme: {
    extend: {
      spacing: {
        gutter: "0.5rem",
        "gutter-md": "1rem",
        "gutter-xl": "2rem",
      },
    },
  },
  plugins: [gutterPlugin],
};

Then use in your markup:

<div class="px-gutter -mx-gutter"></div>