Add mix-blend-mode utilities

Author: adamwathan

__tests__/fixtures/tailwind-output-flagged.css

@@ -282,6 +282,7 @@ module.exports = {
   placeholderOpacity: require('./placeholderOpacity'),
 
   opacity: require('./opacity'),
+  mixBlendMode: require('./mixBlendMode'),
   boxShadow: require('./boxShadow'),
   outline: require('./outline'),
   ringWidth: require('./ringWidth'),

__tests__/fixtures/tailwind-output-important.css

@@ -0,0 +1 @@
+module.exports = require('../../lib/plugins/mixBlendMode').default()

__tests__/fixtures/tailwind-output-no-color-opacity.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),

__tests__/fixtures/tailwind-output.css

@@ -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>

jit/corePlugins/index.js

@@ -120,4 +120,5 @@ export const corePluginList = [
   'transitionDuration',
   'transitionDelay',
   'animation',
+  'mixBlendMode',
 ]

jit/corePlugins/mixBlendMode.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'