tw-gutters

tw-gutters is a TailwindCSS plugin that adds gutter classes from TailwindCSS default spacing. This plugin allows you to easily add gutters (space between flex item) to your website layout quickly.

Installation

You can install the plugin via npm. Make sure you have TailwindCSS installed beforehand.

npm install -D tw-gutters

Usage

After installing the plugin, you can include it in your TailwindCSS configuration. Open your tailwind.config.js file and add tw-gutters to the existing plugins array.

Without Options

// tailwind.config.js

module.exports = {
  // Other configurations
  plugins: [
    // Other plugins
    require('tw-gutters'),
  ],
};

It will generate class like gutters-0, gutters-x-1, gutters-y-2 Now, you can use gutter classes on your elements in your HTML file:

<div class="flex flex-wrap gutters-4">
  <div class="flex-initial w-1/2">Content</div>
  <div class="flex-initial w-1/2">Content</div>
</div>

With Options

// tailwind.config.js

module.exports = {
  // Other configurations
  plugins: [
    // Other plugins
    require('tw-gutters')({ useShortClass: true }),
  ],
};

It will generate class like g-0, gx-1, gy-2 Now, you can use gutter classes on your elements in your HTML file:

<div class="flex flex-wrap gx-2">
  <div class="flex-initial w-1/2">Content</div>
  <div class="flex-initial w-1/2">Content</div>
</div>

License

This plugin is licensed under the MIT License