Init repository

Author: hacknug

.gitignore

@@ -0,0 +1,2 @@
+.DS_STORE
+node_modules

index.js

@@ -0,0 +1,61 @@
+const _ = require('lodash')
+
+module.exports = function (options = {}) {
+  return function ({ addUtilities, config, e }) {
+    let { counts, widths, rules, variants } = _.defaults(options, {
+      counts: [1, 2, 3],
+      rules: {
+        colors: config('borderColors'),
+        widths: config('borderWidths'),
+      },
+    })
+
+    const getName = (name) => name === 'default' ? '' : `-${name}`
+
+    counts = _.map(counts, (count) => ({
+      [`.${e(`col-count-${count}`)}`]: { 'column-count': count },
+      [`.${e(`col-count-${count}`)}`]: { 'column-count': count },
+    }))
+
+    widths = _.map(widths, (width, name) => ({
+      [`.${e(`col-w-${name}`)}`]: { 'column-width': width },
+    }))
+
+    const ruleColors = _.map(rules.colors, (color, name) => ({
+      [`.${e(`col-rule${getName(name)}`)}`]: { 'column-rule-color': color },
+    }))
+
+    const ruleWidths = _.map(rules.widths, (width, name) => ({
+      [`.${e(`col-rule${getName(name)}`)}`]: { 'column-rule-width': width },
+    }))
+
+    addUtilities(counts, variants)
+    addUtilities(widths, variants)
+    addUtilities(ruleColors, variants)
+    addUtilities(ruleWidths, variants)
+    addUtilities(
+      {
+        // Column-Rule Style
+        '.col-rule-none': { columnRuleStyle: 'none' },
+        '.col-rule-hidden': { columnRuleStyle: 'hidden' },
+        '.col-rule-dotted': { columnRuleStyle: 'dotted' },
+        '.col-rule-dashed': { columnRuleStyle: 'dashed' },
+        '.col-rule-solid': { columnRuleStyle: 'solid' },
+        '.col-rule-double': { columnRuleStyle: 'double' },
+        '.col-rule-groove': { columnRuleStyle: 'groove' },
+        '.col-rule-ridge': { columnRuleStyle: 'ridge' },
+        '.col-rule-inset': { columnRuleStyle: 'inset' },
+        '.col-rule-outset': { columnRuleStyle: 'outset' },
+
+        // Column-Fill
+        '.col-auto': { columnFill: 'auto' },
+        '.col-balance': { columnFill: 'balance' },
+        '.col-balance-all': { columnFill: 'balance-all' },
+
+        // Column-Span
+        '.col-none': { columnSpan: 'none' },
+        '.col-all': { columnSpan: 'all' },
+      }, variants
+    )
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tailwindcss-multi-column",
+  "version": "0.1.0",
+  "description": "Multi-Column utilities for Tailwind CSS.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacknug/tailwindcss-multi-column.git"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "tailwind css",
+    "tailwindcss-plugin",
+    "plugin"
+  ],
+  "author": {
+    "name": "Nestor Vera",
+    "email": "nestorvera@me.com",
+    "url": "https://nestor.rip/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hacknug/tailwindcss-multi-column/issues"
+  },
+  "homepage": "https://github.com/hacknug/tailwindcss-multi-column#readme",
+  "dependencies": {
+    "lodash": "^4.17.10"
+  }
+}

readme.md

@@ -0,0 +1,82 @@
+# Tailwind CSS Multi-Column Plugin
+
+This plugin adds utilities to use all multi-column properties with Tailwind CSS.
+
+## Installation
+
+Add this plugin to your project:
+
+```bash
+# Install using pnpm
+pnpm install --save-dev tailwindcss-multi-column
+
+# Install using npm
+npm install --save-dev tailwindcss-multi-column
+
+# Install using yarn
+yarn add -D tailwindcss-multi-column
+```
+
+## Usage
+
+By default the plugin uses the `borderColors` and `borderWidths` properties from the config file to generate the rules classes. You can change that to whatever, just keep in mind if you have a `default` key in both objects, `.column-rule` will set both the `column-rule-color` and `column-rule-width` of the element.
+
+```js
+require('tailwindcss-multi-column')({
+  counts: [1, 2],
+  widths: {
+    'sm': '120px',
+    'md': '240px',
+    'lg': '360px',
+  },
+  rules: {
+    colors: {
+      'red': 'red',
+      'lime': 'lime',
+      'blue': 'blue',
+    },
+    widths: {
+      default: '1px',
+      'sm': '2px',
+      'md': '3px',
+    },
+  },
+  variants: [],
+}),
+```
+
+```css
+.col-count-1 { column-count: 1; }
+.col-count-2 { column-count: 2; }
+.col-count-3 { column-count: 3; }
+
+.col-w-sm { column-width: 120px; }
+.col-w-md { column-width: 240px; }
+.col-w-lg { column-width: 360px; }
+
+.col-rule-red { column-rule-color: red; }
+.col-rule-lime { column-rule-color: lime; }
+.col-rule-blue { column-rule-color: blue; }
+
+.col-rule { column-rule-width: 1px; }
+.col-rule-sm { column-rule-width: 2px; }
+.col-rule-md { column-rule-width: 3px; }
+
+.col-rule-none { column-rule-style: none; }
+.col-rule-hidden { column-rule-style: hidden; }
+.col-rule-dotted { column-rule-style: dotted; }
+.col-rule-dashed { column-rule-style: dashed; }
+.col-rule-solid { column-rule-style: solid; }
+.col-rule-double { column-rule-style: double; }
+.col-rule-groove { column-rule-style: groove; }
+.col-rule-ridge { column-rule-style: ridge; }
+.col-rule-inset { column-rule-style: inset; }
+.col-rule-outset { column-rule-style: outset; }
+
+.col-auto { column-fill: auto; }
+.col-balance { column-fill: balance; }
+.col-balance-all { column-fill: balance-all; }
+
+.col-none { column-span: none; }
+.col-all { column-span: all; }
+```

shrinkwrap.yaml

@@ -0,0 +1,12 @@
+dependencies:
+  lodash: 4.17.10
+packages:
+  /lodash/4.17.10:
+    dev: false
+    resolution:
+      integrity: sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
+registry: 'https://registry.npmjs.org/'
+shrinkwrapMinorVersion: 9
+shrinkwrapVersion: 3
+specifiers:
+  lodash: ^4.17.10