diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
new file mode 100644
index 0000000..86f1cbd
--- /dev/null
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+ release:
+ types: [created]
+
+jobs:
+# build:
+# runs-on: ubuntu-latest
+# steps:
+# - uses: actions/checkout@v2
+# - uses: actions/setup-node@v1
+# with:
+# node-version: 12
+# - run: npm ci
+# - run: npm test
+
+ publish-npm:
+ # needs: build
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://registry.npmjs.org/
+ - run: npm install
+ - run: npm publish --access public
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+ publish-gpr:
+# needs: build
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+ - uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ registry-url: https://npm.pkg.github.com/
+ - run: npm install
+ - run: npm publish --access public
+ env:
+ NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f846c68
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+yarn.lock
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..f4d95b9
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,7 @@
+.github
+dist
+node_modules
+scripts
+jsconfig.json
+package-lock.json
+yarn.lock
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7fe5809
--- /dev/null
+++ b/README.md
@@ -0,0 +1,84 @@
+# Tailwind CSS Plugin – Blend Mode
+
+Utilities for controlling blending mode behaviour.
+
+## Install
+
+1. Install the plugin:
+
+```bash
+# Using npm
+npm install @neupauer/tailwindcss-plugin-blend-mode
+
+# Using Yarn
+yarn add @neupauer/tailwindcss-plugin-blend-mode
+```
+
+2. Add it to your `tailwind.config.js` file:
+
+```js
+// tailwind.config.js
+module.exports = {
+ // ...
+ plugins: [require("@neupauer/tailwindcss-plugin-blend-mode")],
+};
+```
+
+## Configuration
+
+```js
+// tailwind.config.js
+module.exports = {
+ variants: {
+ // default
+ blendMode: [],
+ },
+};
+```
+
+## Available Utilities
+
+| Utility | Style |
+| ------------------------ | ------------------------------------ |
+| `.isolate` | `isolation: isolate` |
+| `.no-isolate` | `isolation: auto` |
+| `.mix-blend-normal` | `mix-blend-mode: normal` |
+| `.mix-blend-multiply` | `mix-blend-mode: multiply` |
+| `.mix-blend-screen` | `mix-blend-mode: screen` |
+| `.mix-blend-overlay` | `mix-blend-mode: overlay` |
+| `.mix-blend-darken` | `mix-blend-mode: darken` |
+| `.mix-blend-lighten` | `mix-blend-mode: lighten` |
+| `.mix-blend-color-dodge` | `mix-blend-mode: color-dodge` |
+| `.mix-blend-color-burn` | `mix-blend-mode: color-burn` |
+| `.mix-blend-hard-light` | `mix-blend-mode: hard-light` |
+| `.mix-blend-soft-light` | `mix-blend-mode: soft-light` |
+| `.mix-blend-difference` | `mix-blend-mode: difference` |
+| `.mix-blend-exclusion` | `mix-blend-mode: exclusion` |
+| `.mix-blend-hue` | `mix-blend-mode: hue` |
+| `.mix-blend-saturation` | `mix-blend-mode: saturation` |
+| `.mix-blend-color` | `mix-blend-mode: color` |
+| `.mix-blend-luminosity` | `mix-blend-mode: luminosity` |
+| `.bg-blend-normal` | `background-blend-mode: normal` |
+| `.bg-blend-multiply` | `background-blend-mode: multiply` |
+| `.bg-blend-screen` | `background-blend-mode: screen` |
+| `.bg-blend-overlay` | `background-blend-mode: overlay` |
+| `.bg-blend-darken` | `background-blend-mode: darken` |
+| `.bg-blend-lighten` | `background-blend-mode: lighten` |
+| `.bg-blend-color-dodge` | `background-blend-mode: color-dodge` |
+| `.bg-blend-color-burn` | `background-blend-mode: color-burn` |
+| `.bg-blend-hard-light` | `background-blend-mode: hard-light` |
+| `.bg-blend-soft-light` | `background-blend-mode: soft-light` |
+| `.bg-blend-difference` | `background-blend-mode: difference` |
+| `.bg-blend-exclusion` | `background-blend-mode: exclusion` |
+| `.bg-blend-hue` | `background-blend-mode: hue` |
+| `.bg-blend-saturation` | `background-blend-mode: saturation` |
+| `.bg-blend-color` | `background-blend-mode: color` |
+| `.bg-blend-luminosity` | `background-blend-mode: luminosity` |
+
+## Usage
+
+```html
+
+
+
+```
diff --git a/dist/.gitignore b/dist/.gitignore
new file mode 100644
index 0000000..2f41fac
--- /dev/null
+++ b/dist/.gitignore
@@ -0,0 +1,3 @@
+*
+!.gitignore
+!.npmignore
diff --git a/dist/.npmignore b/dist/.npmignore
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..086e409
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "@neupauer/tailwindcss-plugin-blend-mode",
+ "version": "1.0.0",
+ "description": "A Tailwind CSS plugin for controlling blending mode behaviour.",
+ "main": "src/index.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/neupauer/tailwindcss-plugin-blend-mode"
+ },
+ "keywords": [
+ "tailwindcss",
+ "plugin",
+ "blend-mode",
+ "mix-blend-mode",
+ "background-blend-mode"
+ ],
+ "author": {
+ "name": "Peter Neupauer",
+ "url": "https://neupauer.sk"
+ },
+ "license": "MIT",
+ "publishConfig": {
+ "access": "public"
+ },
+ "scripts": {
+ "prepublishOnly": "node scripts/build.js"
+ },
+ "devDependencies": {
+ "autoprefixer": "^10.2.0",
+ "clean-css": "^4.2.1",
+ "postcss": "^8.2.2",
+ "tailwindcss": "^2.0.2"
+ },
+ "prettier": {
+ "printWidth": 120
+ }
+}
diff --git a/scripts/build.js b/scripts/build.js
new file mode 100644
index 0000000..86310be
--- /dev/null
+++ b/scripts/build.js
@@ -0,0 +1,37 @@
+const fs = require("fs");
+const postcss = require("postcss");
+const tailwind = require("tailwindcss");
+const CleanCSS = require("clean-css");
+
+function buildDistFile(filename) {
+ return postcss([
+ tailwind({
+ corePlugins: false,
+
+ plugins: [require("../src/index.js")],
+ }),
+ require("autoprefixer"),
+ ])
+ .process("@tailwind utilities", {
+ from: null,
+ to: `./dist/${filename}.css`,
+ map: false,
+ })
+ .then((result) => {
+ fs.writeFileSync(`./dist/${filename}.css`, result.css);
+ return result;
+ })
+ .then((result) => {
+ const minified = new CleanCSS().minify(result.css);
+ fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+}
+
+console.info("Building CSS...");
+
+Promise.all([buildDistFile("dist")]).then(() => {
+ console.log("Finished building CSS.");
+});
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..31f6103
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,52 @@
+const plugin = require("tailwindcss/plugin");
+
+const blendModes = [
+ "normal",
+ "multiply",
+ "screen",
+ "overlay",
+ "darken",
+ "lighten",
+ "color-dodge",
+ "color-burn",
+ "hard-light",
+ "soft-light",
+ "difference",
+ "exclusion",
+ "hue",
+ "saturation",
+ "color",
+ "luminosity",
+];
+
+const blendModePlugin = plugin(function ({ addUtilities, theme, variants, e }) {
+ addUtilities(
+ [
+ {
+ ".isolate": {
+ isolation: "isolate",
+ },
+ ".no-isolate": {
+ isolation: "auto",
+ },
+ },
+ ...blendModes.map((blendMode) => {
+ return {
+ [`.${e(`mix-blend-${blendMode}`)}`]: {
+ mixBlendMode: `${blendMode}`,
+ },
+ };
+ }),
+ ...blendModes.map((blendMode) => {
+ return {
+ [`.${e(`bg-blend-${blendMode}`)}`]: {
+ backgroundBlendMode: `${blendMode}`,
+ },
+ };
+ }),
+ ],
+ variants("blendMode")
+ );
+});
+
+module.exports = blendModePlugin;