Skip to content

Commit 765e3a7

Browse files
hacknughacknug
committed
Init repository
0 parents  commit 765e3a7

File tree

4 files changed

+131
-0
lines changed

4 files changed

+131
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_STORE
2+
node_modules

‎index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
module.exports = function(variants) {
2+
return function({ addUtilities }) {
3+
addUtilities(
4+
{
5+
// Mix Blend Mode
6+
'.blend-normal': { mixBlendMode: 'normal' },
7+
'.blend-multiply': { mixBlendMode: 'multiply' },
8+
'.blend-screen': { mixBlendMode: 'screen' },
9+
'.blend-overlay': { mixBlendMode: 'overlay' },
10+
'.blend-darken': { mixBlendMode: 'darken' },
11+
'.blend-lighten': { mixBlendMode: 'lighten' },
12+
'.blend-color-dodge': { mixBlendMode: 'color-dodge' },
13+
'.blend-color-burn': { mixBlendMode: 'color-burn' },
14+
'.blend-hard-light': { mixBlendMode: 'hard-light' },
15+
'.blend-soft-light': { mixBlendMode: 'soft-light' },
16+
'.blend-difference': { mixBlendMode: 'difference' },
17+
'.blend-exclusion': { mixBlendMode: 'exclusion' },
18+
'.blend-hue': { mixBlendMode: 'hue' },
19+
'.blend-saturation': { mixBlendMode: 'saturation' },
20+
'.blend-color': { mixBlendMode: 'color' },
21+
'.blend-luminosity': { mixBlendMode: 'luminosity' },
22+
23+
// Background Blend Mode
24+
'.bg-blend-normal': { backgroundBlendMode: 'normal' },
25+
'.bg-blend-multiply': { backgroundBlendMode: 'multiply' },
26+
'.bg-blend-screen': { backgroundBlendMode: 'screen' },
27+
'.bg-blend-overlay': { backgroundBlendMode: 'overlay' },
28+
'.bg-blend-darken': { backgroundBlendMode: 'darken' },
29+
'.bg-blend-lighten': { backgroundBlendMode: 'lighten' },
30+
'.bg-blend-color-dodge': { backgroundBlendMode: 'color-dodge' },
31+
'.bg-blend-color-burn': { backgroundBlendMode: 'color-burn' },
32+
'.bg-blend-hard-light': { backgroundBlendMode: 'hard-light' },
33+
'.bg-blend-soft-light': { backgroundBlendMode: 'soft-light' },
34+
'.bg-blend-difference': { backgroundBlendMode: 'difference' },
35+
'.bg-blend-exclusion': { backgroundBlendMode: 'exclusion' },
36+
'.bg-blend-hue': { backgroundBlendMode: 'hue' },
37+
'.bg-blend-saturation': { backgroundBlendMode: 'saturation' },
38+
'.bg-blend-color': { backgroundBlendMode: 'color' },
39+
'.bg-blend-luminosity': { backgroundBlendMode: 'luminosity' },
40+
41+
// Isolate
42+
'.isolate': { isolation: 'isolate' },
43+
'.isolate-none': { isolation: 'auto' },
44+
},
45+
variants
46+
)
47+
}
48+
}

‎package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "tailwindcss-blend-mode",
3+
"version": "0.1.0",
4+
"description": "Describe what this plugin does",
5+
"main": "index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/hacknug/tailwindcss-blend-mode.git"
9+
},
10+
"keywords": [
11+
"tailwind",
12+
"tailwindcss",
13+
"tailwind css",
14+
"tailwindcss-plugin",
15+
"plugin"
16+
],
17+
"author": "Nestor Vera <[email protected]> (https://nestor.rip)",
18+
"license": "MIT",
19+
"bugs": {
20+
"url": "https://github.com/hacknug/tailwindcss-blend-mode/issues"
21+
},
22+
"homepage": "https://github.com/hacknug/tailwindcss-blend-mode#readme"
23+
}

‎readme.md

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# Tailwind CSS Cursor Extended Plugin
2+
3+
This plugin adds utilities to use blend-modes with Tailwind CSS.
4+
5+
## Installation
6+
7+
Add this plugin to your project:
8+
9+
```bash
10+
# Install using npm
11+
npm install --save-dev tailwindcss-blend-mode
12+
13+
# Install using yarn
14+
yarn add -D tailwindcss-blend-mode
15+
```
16+
17+
## Usage
18+
19+
```js
20+
require('tailwindcss-blend-mode')(['responsive'])
21+
```
22+
23+
```css
24+
.blend-normal { mix-blend-mode: normal; }
25+
.blend-multiply { mix-blend-mode: multiply; }
26+
.blend-screen { mix-blend-mode: screen; }
27+
.blend-overlay { mix-blend-mode: overlay; }
28+
.blend-darken { mix-blend-mode: darken; }
29+
.blend-lighten { mix-blend-mode: lighten; }
30+
.blend-color-dodge { mix-blend-mode: color-dodge; }
31+
.blend-color-burn { mix-blend-mode: color-burn; }
32+
.blend-hard-light { mix-blend-mode: hard-light; }
33+
.blend-soft-light { mix-blend-mode: soft-light; }
34+
.blend-difference { mix-blend-mode: difference; }
35+
.blend-exclusion { mix-blend-mode: exclusion; }
36+
.blend-hue { mix-blend-mode: hue; }
37+
.blend-saturation { mix-blend-mode: saturation; }
38+
.blend-color { mix-blend-mode: color; }
39+
.blend-luminosity { mix-blend-mode: luminosity; }
40+
.bg-blend-normal { background-blend-mode: normal; }
41+
.bg-blend-multiply { background-blend-mode: multiply; }
42+
.bg-blend-screen { background-blend-mode: screen; }
43+
.bg-blend-overlay { background-blend-mode: overlay; }
44+
.bg-blend-darken { background-blend-mode: darken; }
45+
.bg-blend-lighten { background-blend-mode: lighten; }
46+
.bg-blend-color-dodge { background-blend-mode: color-dodge; }
47+
.bg-blend-color-burn { background-blend-mode: color-burn; }
48+
.bg-blend-hard-light { background-blend-mode: hard-light; }
49+
.bg-blend-soft-light { background-blend-mode: soft-light; }
50+
.bg-blend-difference { background-blend-mode: difference; }
51+
.bg-blend-exclusion { background-blend-mode: exclusion; }
52+
.bg-blend-hue { background-blend-mode: hue; }
53+
.bg-blend-saturation { background-blend-mode: saturation; }
54+
.bg-blend-color { background-blend-mode: color; }
55+
.bg-blend-luminosity { background-blend-mode: luminosity; }
56+
.isolate { isolation: isolate; }
57+
.isolate-none { isolation: auto; }
58+
```

0 commit comments

Comments
 (0)