Add mix-blend-mode utilities

tailwindlabs · Apr 3, 2021 · 27bce5c · 27bce5c
1 parent 21a96af
commit 27bce5c
Show file tree

Hide file tree

Showing 12 changed files with 1,573 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js
@@ -282,6 +282,7 @@ module.exports = {
   placeholderOpacity: require('./placeholderOpacity'),
 
   opacity: require('./opacity'),
+  mixBlendMode: require('./mixBlendMode'),
   boxShadow: require('./boxShadow'),
   outline: require('./outline'),
   ringWidth: require('./ringWidth'),

diff --git a/jit/corePlugins/mixBlendMode.js b/jit/corePlugins/mixBlendMode.js
@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/mixBlendMode').default()
diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css
@@ -576,6 +576,12 @@
 .opacity-90 {
   opacity: 0.9;
 }
+.mix-multiply {
+  mix-blend-mode: multiply;
+}
+.mix-saturation {
+  mix-blend-mode: saturation;
+}
 .shadow-md {
   --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),

diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html
@@ -88,6 +88,7 @@
     <div class="object-cover"></div>
     <div class="object-bottom"></div>
     <div class="opacity-90"></div>
+    <div class="mix-multiply mix-saturation"></div>
     <div class="order-last order-2"></div>
     <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>

diff --git a/src/corePluginList.js b/src/corePluginList.js
@@ -120,4 +120,5 @@ export const corePluginList = [
   'transitionDuration',
   'transitionDelay',
   'animation',
+  'mixBlendMode',
 ]
diff --git a/src/plugins/index.js b/src/plugins/index.js
@@ -70,6 +70,7 @@ export { default as maxHeight } from './maxHeight'
 export { default as maxWidth } from './maxWidth'
 export { default as minHeight } from './minHeight'
 export { default as minWidth } from './minWidth'
+export { default as mixBlendMode } from './mixBlendMode'
 export { default as objectFit } from './objectFit'
 export { default as objectPosition } from './objectPosition'
 export { default as opacity } from './opacity'

diff --git a/src/plugins/mixBlendMode.js b/src/plugins/mixBlendMode.js
@@ -0,0 +1,25 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.mix-normal': { 'mix-blend-mode': 'normal' },
+        '.mix-multiply': { 'mix-blend-mode': 'multiply' },
+        '.mix-screen': { 'mix-blend-mode': 'screen' },
+        '.mix-overlay': { 'mix-blend-mode': 'overlay' },
+        '.mix-darken': { 'mix-blend-mode': 'darken' },
+        '.mix-lighten': { 'mix-blend-mode': 'lighten' },
+        '.mix-color-dodge': { 'mix-blend-mode': 'color-dodge' },
+        '.mix-color-burn': { 'mix-blend-mode': 'color-burn' },
+        '.mix-hard-light': { 'mix-blend-mode': 'hard-light' },
+        '.mix-soft-light': { 'mix-blend-mode': 'soft-light' },
+        '.mix-difference': { 'mix-blend-mode': 'difference' },
+        '.mix-exclusion': { 'mix-blend-mode': 'exclusion' },
+        '.mix-hue': { 'mix-blend-mode': 'hue' },
+        '.mix-saturation': { 'mix-blend-mode': 'saturation' },
+        '.mix-color': { 'mix-blend-mode': 'color' },
+        '.mix-luminosity': { 'mix-blend-mode': 'luminosity' },
+      },
+      variants('mixBlendMode')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -805,6 +805,7 @@ module.exports = {
     maxWidth: ['responsive'],
     minHeight: ['responsive'],
     minWidth: ['responsive'],
+    mixBlendMode: ['responsive'],
     objectFit: ['responsive'],
     objectPosition: ['responsive'],
     opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],