Skip to content

Commit 1cb060d

Browse files
adamwathanneupauer
andauthored
Add mix-blend-mode and background-blend-mode utilities (#3920)
* Add mix-blend-mode utilities * Rename mix-blend-mode utilities to `mix-blend-*` Co-Authored-By: Peter Neupauer <peter@neupauer.sk> * Add `background-blend-mode` utilities Co-Authored-By: Peter Neupauer <peter@neupauer.sk> Co-authored-by: Peter Neupauer <peter@neupauer.sk>
1 parent 21a96af commit 1cb060d

14 files changed

+3146
-0
lines changed

__tests__/fixtures/tailwind-output-flagged.css

Lines changed: 768 additions & 0 deletions
Large diffs are not rendered by default.

__tests__/fixtures/tailwind-output-important.css

Lines changed: 768 additions & 0 deletions
Large diffs are not rendered by default.

__tests__/fixtures/tailwind-output-no-color-opacity.css

Lines changed: 768 additions & 0 deletions
Large diffs are not rendered by default.

__tests__/fixtures/tailwind-output.css

Lines changed: 768 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../lib/plugins/backgroundBlendMode').default()

jit/corePlugins/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,8 @@ module.exports = {
282282
placeholderOpacity: require('./placeholderOpacity'),
283283

284284
opacity: require('./opacity'),
285+
backgroundBlendMode: require('./backgroundBlendMode'),
286+
mixBlendMode: require('./mixBlendMode'),
285287
boxShadow: require('./boxShadow'),
286288
outline: require('./outline'),
287289
ringWidth: require('./ringWidth'),

jit/corePlugins/mixBlendMode.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('../../lib/plugins/mixBlendMode').default()

jit/tests/basic-usage.test.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -576,6 +576,18 @@
576576
.opacity-90 {
577577
opacity: 0.9;
578578
}
579+
.bg-blend-darken {
580+
background-blend-mode: darken;
581+
}
582+
.bg-blend-difference {
583+
background-blend-mode: difference;
584+
}
585+
.mix-blend-multiply {
586+
mix-blend-mode: multiply;
587+
}
588+
.mix-blend-saturation {
589+
mix-blend-mode: saturation;
590+
}
579591
.shadow-md {
580592
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
581593
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),

jit/tests/basic-usage.test.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@
8888
<div class="object-cover"></div>
8989
<div class="object-bottom"></div>
9090
<div class="opacity-90"></div>
91+
<div class="bg-blend-darken bg-blend-difference"></div>
92+
<div class="mix-blend-multiply mix-blend-saturation"></div>
9193
<div class="order-last order-2"></div>
9294
<div class="outline-none outline-black"></div>
9395
<div class="overflow-hidden"></div>

src/corePluginList.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,6 @@ export const corePluginList = [
120120
'transitionDuration',
121121
'transitionDelay',
122122
'animation',
123+
'mixBlendMode',
124+
'backgroundBlendMode',
123125
]

0 commit comments

Comments
 (0)