Init repository

Author: hacknug

.gitignore

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

index.js

@@ -0,0 +1,24 @@
+const _ = require('lodash')
+
+module.exports = function (options = {}) {
+  return function ({ addUtilities, config, e }) {
+    let { colors, widths, variants } = _.defaults(options, {
+      colors: config('borderColors'),
+      widths: config('borderWidths'),
+    })
+
+    const getName = (name) => name === 'default' ? '' : `-${name}`
+
+    colors = _.map(colors, (color, name) => ({
+      [`.${e(`text-fill${getName(name)}`)}`]: { '-webkit-text-fill-color': color },
+      [`.${e(`text-stroke${getName(name)}`)}`]: { '-webkit-text-stroke-color': color },
+    }))
+
+    widths = _.map(widths, (width, name) => ({
+      [`.${e(`text-stroke${getName(name)}`)}`]: { '-webkit-text-stroke-width': width },
+    }))
+
+    addUtilities(colors, variants)
+    addUtilities(widths, variants)
+  }
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tailwindcss-text-fill-stroke",
+  "version": "0.1.0",
+  "description": "Text-fill and text-stroke utilities for Tailwind CSS.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hacknug/tailwindcss-text-fill-stroke.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-text-fill-stroke/issues"
+  },
+  "homepage": "https://github.com/hacknug/tailwindcss-text-fill-stroke#readme",
+  "dependencies": {
+    "lodash": "^4.17.10"
+  }
+}

readme.md

@@ -0,0 +1,50 @@
+# Tailwind CSS Text Indent Plugin
+
+This plugin adds utilities to use text-fill and text-stroke with Tailwind CSS.
+
+## Installation
+
+Add this plugin to your project:
+
+```bash
+# Install using pnpm
+pnpm install --save-dev tailwindcss-text-fill-stroke
+
+# Install using npm
+npm install --save-dev tailwindcss-text-fill-stroke
+
+# Install using yarn
+yarn add -D tailwindcss-text-fill-stroke
+```
+
+## Usage
+
+By default the plugin uses the `borderColors` and `borderWidths` properties from the config file to generate all of its classes. You can change that to whatever, just keep in mind if you have a `default` key in both objects, `.text-stroke` will set both the `-webkit-stroke-color` and `-webkit-stroke-width` of the element.
+
+```js
+require('tailwindcss-text-fill-stroke')({
+  colors: {
+    'red': 'red',
+    'blue': 'blue',
+    'green': 'green',
+  },
+  widths: {
+    default: '1px',
+    'sm': '4px',
+    'md': '8px',
+  },
+  variants: [],
+}),
+```
+
+```css
+.text-fill-red { -webkit-text-fill-color: red; }
+.text-stroke-red { -webkit-text-stroke-color: red; }
+.text-fill-blue { -webkit-text-fill-color: blue; }
+.text-stroke-blue { -webkit-text-stroke-color: blue; }
+.text-fill-green { -webkit-text-fill-color: green; }
+.text-stroke-green { -webkit-text-stroke-color: green; }
+.text-stroke { -webkit-text-stroke-width: 1px; }
+.text-stroke-sm { -webkit-text-stroke-width: 4px; }
+.text-stroke-md { -webkit-text-stroke-width: 8px; }
+```

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