Add missing utilities for column-gap

Author: hacknug

index.js

@@ -2,7 +2,7 @@ const _ = require('lodash')
 
 module.exports = function (options = {}) {
   return function ({ addUtilities, config, e }) {
-    let { counts, widths, rules, variants } = _.defaults(options, {
+    let { counts, gaps, widths, rules, variants } = _.defaults(options, {
       counts: [1, 2, 3],
       rules: {
         colors: config('borderColors'),
@@ -17,6 +17,10 @@ module.exports = function (options = {}) {
       [`.${e(`col-count-${count}`)}`]: { 'column-count': count },
     }))
 
+    gaps = _.map(gaps, (gap, name) => ({
+      [`.${e(`col-gap${getName(name)}`)}`]: { 'column-gap': gap },
+    }))
+
     widths = _.map(widths, (width, name) => ({
       [`.${e(`col-w-${name}`)}`]: { 'column-width': width },
     }))
@@ -30,6 +34,7 @@ module.exports = function (options = {}) {
     }))
 
     addUtilities(counts, variants)
+    addUtilities(gaps, variants)
     addUtilities(widths, variants)
     addUtilities(ruleColors, variants)
     addUtilities(ruleWidths, variants)

readme.md

@@ -24,6 +24,11 @@ By default the plugin uses the `borderColors` and `borderWidths` properties from
 ```js
 require('tailwindcss-multi-column')({
   counts: [1, 2],
+  gaps: {
+    'sm': '1rem',
+    'md': '1.5rem',
+    'lg': '2rem',
+  },
   widths: {
     'sm': '120px',
     'md': '240px',
@@ -50,6 +55,10 @@ require('tailwindcss-multi-column')({
 .col-count-2 { column-count: 2; }
 .col-count-3 { column-count: 3; }
 
+.col-gap-sm { column-gap: 1rem; }
+.col-gap-md { column-gap: 1.5rem; }
+.col-gap-lg { column-gap: 2rem; }
+
 .col-w-sm { column-width: 120px; }
 .col-w-md { column-width: 240px; }
 .col-w-lg { column-width: 360px; }