Initial commit 🌈

Author: cossssmin

.gitignore

@@ -0,0 +1 @@
+/node_modules/

.release-it.json

@@ -0,0 +1,8 @@
+{
+  "git": {
+    "tagName": "v${version}"
+  },
+  "github": {
+    "release": true
+  }
+}

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## 1.0.0 - 2019-01-06
+
+Initial release

README.md

@@ -0,0 +1,59 @@
+# Tailwind CSS Border Gradients Plugin
+
+This plugin is based on the [tailwindcss-gradients](https://github.com/benface/tailwindcss-gradients) plugin. Usage is the same, it just outputs `border-image` gradients, instead of `background-image`.
+
+## Installation
+
+```bash
+npm install tailwindcss-border-gradients
+```
+
+## Usage
+
+```js
+// In your Tailwind CSS config
+
+{
+  plugins: [
+    require('tailwindcss-border-gradients')({
+      variants: ['responsive'],
+      directions: {
+        't': 'to top',
+        'r': 'to right',
+        'b': 'to bottom',
+        'l': 'to left',
+      },
+      gradients: {
+        'red': '#f00',
+        'red-blue': ['#f00', '#00f'],
+        'red-green-blue': ['#f00', '#0f0', '#00f'],
+      },
+    }),
+  ],
+}
+```
+
+This plugin generates the following utilities:
+
+```css
+/* configurable with the "directions" and "gradients" options */
+
+.border-gradient-[direction-name]-[gradient-name] {
+  border-image: linear-gradient([direction-value], [gradient-color-1], [gradient-color-2], [...]) 1;
+}
+```
+
+`directions` is optional and it defaults to:
+
+```js
+{
+  't': 'to top',
+  'tr': 'to top right',
+  'r': 'to right',
+  'br': 'to bottom right',
+  'b': 'to bottom',
+  'bl': 'to bottom left',
+  'l': 'to left',
+  'tl': 'to top left',
+}
+```

index.js

@@ -0,0 +1,34 @@
+module.exports = ({
+  variants = {},
+  directions = {
+    't': 'to top',
+    'tr': 'to top right',
+    'r': 'to right',
+    'br': 'to bottom right',
+    'b': 'to bottom',
+    'bl': 'to bottom left',
+    'l': 'to left',
+    'tl': 'to top left',
+  },
+  gradients = {},
+} = {}) => ({ e, addUtilities }) => {
+  addUtilities(
+    {
+      ...(function() {
+        const utilities = {};
+        Object.entries(gradients).map(([gradientName, gradientColors]) => {
+          if (!Array.isArray(gradientColors) || gradientColors.length === 1) {
+            gradientColors = ['transparent', Array.isArray(gradientColors) ? gradientColors[0] : gradientColors];
+          }
+          Object.entries(directions).map(([directionName, directionValue]) => {
+            utilities[`.${e(`border-gradient-${directionName}-${gradientName}`)}`] = {
+              borderImage: `linear-gradient(${directionValue}, ${gradientColors.join(', ')}) 1`,
+            };
+          });
+        });
+        return utilities;
+      })(),
+    },
+    variants,
+  );
+};