initial commit

Author: benface

.gitignore

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

README.md

@@ -0,0 +1,43 @@
+# Gradients Tailwind CSS Plugin
+
+## Installation
+
+```bash
+npm install tailwindcss-gradients
+```
+
+## Usage
+
+```js
+// In your Tailwind CSS config
+{
+  plugins: [
+    require('tailwindcss-gradients')({
+      variants: ['responsive'],
+      gradients: {
+        'red': '#f00',
+        'red-blue': ['#f00', '#00f'],
+        'red-green-blue': ['#f00', '#0f0', '#00f'],
+      },
+    }),
+  ],
+}
+```
+
+This plugin generates the following utilities:
+
+```css
+/* configurable with the "gradients" option */
+.bg-gradient-to-top-[name] {
+  background-image: linear-gradient(to top, [color-1], [color-2], [...])
+}
+.bg-gradient-to-right-[name] {
+  background-image: linear-gradient(to right, [color-1], [color-2], [...])
+}
+.bg-gradient-to-bottom-[name] {
+  background-image: linear-gradient(to bottom, [color-1], [color-2], [...])
+}
+.bg-gradient-to-left-[name] {
+  background-image: linear-gradient(to left, [color-1], [color-2], [...])
+}
+```

index.js

@@ -0,0 +1,27 @@
+const _ = require('lodash');
+
+module.exports = ({
+  variants = {},
+  gradients = {},
+} = {}) =>
+  ({ e, addUtilities }) => {
+    addUtilities(
+      {
+        ...Object.assign(
+          {},
+          ..._.map(gradients, (colors, name) => {
+            if (!_.isArray(colors)) {
+              colors = ['transparent', colors];
+            }
+            return {
+              [`.bg-gradient-to-top-${e(name)}`]: { backgroundImage: `linear-gradient(to top, ${colors.join(', ')})` },
+              [`.bg-gradient-to-right-${e(name)}`]: { backgroundImage: `linear-gradient(to right, ${colors.join(', ')})` },
+              [`.bg-gradient-to-bottom-${e(name)}`]: { backgroundImage: `linear-gradient(to bottom, ${colors.join(', ')})` },
+              [`.bg-gradient-to-left-${e(name)}`]: { backgroundImage: `linear-gradient(to left, ${colors.join(', ')})` },
+            };
+          }),
+        ),
+      },
+      variants,
+    );
+  };

package-lock.json

@@ -0,0 +1,16 @@
+{
+  "name": "tailwindcss-gradients",
+  "version": "1.0.0",
+  "description": "Tailwind CSS plugin to generate gradient background utilities",
+  "author": "Benoît Rouleau <[email protected]>",
+  "license": "ISC",
+  "repository": "https://github.com/benface/tailwindcss-gradients.git",
+  "bugs": "https://github.com/benface/tailwindcss-gradients/issues",
+  "homepage": "https://github.com/benface/tailwindcss-gradients",
+  "scripts": {
+    "test": "node test.js"
+  },
+  "dependencies": {
+    "lodash": "^4.17.10"
+  }
+}

package.json

@@ -0,0 +1,18 @@
+const plugin = require('./index.js');
+
+let generatedUtilities = {};
+
+plugin({
+  gradients: {
+    'red': '#f00',
+    'red-blue': ['#f00', '#00f'],
+    'red-green-blue': ['#f00', '#0f0', '#00f'],
+  },
+})({
+  e: value => value,
+  addUtilities: (utilities, variants) => {
+    generatedUtilities = utilities;
+  },
+});
+
+console.log("generatedUtilities", generatedUtilities);