tailwind-responsive-spacing

A Tailwind CSS plugin that adds responsive, configurable spacing utilities — including support for negative values and space-* layout helpers.

✨ Features

• ✅ Responsive spacing utilities (e.g. p-sm, mx-md, w-lg)
• ✅ Negative support for margin, inset, and translate
• ✅ Generates space-x-* and space-y-* layout spacing
• ✅ Central spacing config for total design control

📦 Installation

npm install tailwind-responsive-spacing

🚀 Usage

1. Add plugin to tailwind.config.js:

const spacingPlugin = require('tailwind-responsive-spacing');

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    spacingPlugin({
      spacing: {
        sm: { base: '0.5rem', md: '1rem' },
        md: { base: '1rem', md: '2rem' },
        lg: { base: '2rem', md: '4rem' }
      },
      important: false,
      debug: true
    })
  ]
};

📐 Example Output Classes

Given:

spacing: {
  sm: { base: '0.5rem', md: '1rem' },
}

You get these utility classes:

.p-sm     { padding: 0.5rem; }
@screen md {
  .p-sm   { padding: 1rem; }
}

.-mx-sm   { margin-left: -0.5rem; margin-right: -0.5rem; }
/* etc */

📁 Supported Prefixes

• p, px, py, pt, pr, pb, pl, ps, pe
• m, mx, my, mt, mr, mb, ml, ms, me
• w, min-w, h, min-h, max-h, size
• gap, gap-x, gap-y
• inset, inset-x, inset-y, top, right, bottom, left
• scroll-m, scroll-mx, scroll-my, scroll-p, scroll-px, scroll-py
• translate
• space-x, space-y utilities

🔧 Options

| Option | Type | Description | |------------|---------|---------------------------------------------| | spacing | object | Required map of spacing keys → breakpoints | | important| boolean | Whether to append !important | | debug | boolean | Logs warnings for invalid input |

🪪 License

MIT © Sergio Garcia Gallego