@anny.co/tailwindcss-gutters

TailwindCSS plugin that adds polyfill utility classes for gap in flexboxes using margins

Usage no npm install needed!

<script type="module">
  import annyCoTailwindcssGutters from 'https://cdn.skypack.dev/@anny.co/tailwindcss-gutters';
</script>

This plugin polyfills the gap utility for flexboxes not being supported for Safari et al.

NOTE: Support for IE11 is dropped intentionally! We perform active deprecation!

Install the plugin using your package manager:

yarn add @anny.co/tailwindcss-gutters

Add the plugin to your tailwind.config.js

module.exports = {
  ...
  plugins: [
    require('@anny.co/tailwindcss-gutters'),
    ...
  ]
}

Apply the gutters (or gutters-x, gutters-y, respectively) utility class to your flexbox container.

<div class="flex items-center gutters-x-4">
  <div></div>
  <div></div>
  <div></div>
</div>