From 27bce5cdfe509ac3b1b9c110320f4077a64ceb9d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 3 Apr 2021 07:29:42 -0400 Subject: [PATCH 1/3] Add mix-blend-mode utilities --- .../fixtures/tailwind-output-flagged.css | 384 ++++++++++++++++++ .../fixtures/tailwind-output-important.css | 384 ++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 384 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 384 ++++++++++++++++++ jit/corePlugins/index.js | 1 + jit/corePlugins/mixBlendMode.js | 1 + jit/tests/basic-usage.test.css | 6 + jit/tests/basic-usage.test.html | 1 + src/corePluginList.js | 1 + src/plugins/index.js | 1 + src/plugins/mixBlendMode.js | 25 ++ stubs/defaultConfig.stub.js | 1 + 12 files changed, 1573 insertions(+) create mode 100644 jit/corePlugins/mixBlendMode.js create mode 100644 src/plugins/mixBlendMode.js diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 604473b32b82..3ca58addb6c0 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -29141,6 +29141,70 @@ video { animation: bounce 1s infinite; } +.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; +} + .example { font-weight: 700; color: #ef4444; @@ -57705,6 +57769,70 @@ video { animation: bounce 1s infinite; } + .sm\:mix-normal { + mix-blend-mode: normal; + } + + .sm\:mix-multiply { + mix-blend-mode: multiply; + } + + .sm\:mix-screen { + mix-blend-mode: screen; + } + + .sm\:mix-overlay { + mix-blend-mode: overlay; + } + + .sm\:mix-darken { + mix-blend-mode: darken; + } + + .sm\:mix-lighten { + mix-blend-mode: lighten; + } + + .sm\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .sm\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .sm\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .sm\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .sm\:mix-difference { + mix-blend-mode: difference; + } + + .sm\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .sm\:mix-hue { + mix-blend-mode: hue; + } + + .sm\:mix-saturation { + mix-blend-mode: saturation; + } + + .sm\:mix-color { + mix-blend-mode: color; + } + + .sm\:mix-luminosity { + mix-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86270,6 +86398,70 @@ video { animation: bounce 1s infinite; } + .md\:mix-normal { + mix-blend-mode: normal; + } + + .md\:mix-multiply { + mix-blend-mode: multiply; + } + + .md\:mix-screen { + mix-blend-mode: screen; + } + + .md\:mix-overlay { + mix-blend-mode: overlay; + } + + .md\:mix-darken { + mix-blend-mode: darken; + } + + .md\:mix-lighten { + mix-blend-mode: lighten; + } + + .md\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .md\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .md\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .md\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .md\:mix-difference { + mix-blend-mode: difference; + } + + .md\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .md\:mix-hue { + mix-blend-mode: hue; + } + + .md\:mix-saturation { + mix-blend-mode: saturation; + } + + .md\:mix-color { + mix-blend-mode: color; + } + + .md\:mix-luminosity { + mix-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -114835,6 +115027,70 @@ video { animation: bounce 1s infinite; } + .lg\:mix-normal { + mix-blend-mode: normal; + } + + .lg\:mix-multiply { + mix-blend-mode: multiply; + } + + .lg\:mix-screen { + mix-blend-mode: screen; + } + + .lg\:mix-overlay { + mix-blend-mode: overlay; + } + + .lg\:mix-darken { + mix-blend-mode: darken; + } + + .lg\:mix-lighten { + mix-blend-mode: lighten; + } + + .lg\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .lg\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .lg\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .lg\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .lg\:mix-difference { + mix-blend-mode: difference; + } + + .lg\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .lg\:mix-hue { + mix-blend-mode: hue; + } + + .lg\:mix-saturation { + mix-blend-mode: saturation; + } + + .lg\:mix-color { + mix-blend-mode: color; + } + + .lg\:mix-luminosity { + mix-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143400,6 +143656,70 @@ video { animation: bounce 1s infinite; } + .xl\:mix-normal { + mix-blend-mode: normal; + } + + .xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .xl\:mix-screen { + mix-blend-mode: screen; + } + + .xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .xl\:mix-darken { + mix-blend-mode: darken; + } + + .xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .xl\:mix-difference { + mix-blend-mode: difference; + } + + .xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .xl\:mix-hue { + mix-blend-mode: hue; + } + + .xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .xl\:mix-color { + mix-blend-mode: color; + } + + .xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -171965,6 +172285,70 @@ video { animation: bounce 1s infinite; } + .\32xl\:mix-normal { + mix-blend-mode: normal; + } + + .\32xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .\32xl\:mix-screen { + mix-blend-mode: screen; + } + + .\32xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .\32xl\:mix-darken { + mix-blend-mode: darken; + } + + .\32xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .\32xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .\32xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .\32xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .\32xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .\32xl\:mix-difference { + mix-blend-mode: difference; + } + + .\32xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .\32xl\:mix-hue { + mix-blend-mode: hue; + } + + .\32xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .\32xl\:mix-color { + mix-blend-mode: color; + } + + .\32xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 46e893448edd..fac86845fec2 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -29141,6 +29141,70 @@ video { animation: bounce 1s infinite !important; } +.mix-normal { + mix-blend-mode: normal !important; +} + +.mix-multiply { + mix-blend-mode: multiply !important; +} + +.mix-screen { + mix-blend-mode: screen !important; +} + +.mix-overlay { + mix-blend-mode: overlay !important; +} + +.mix-darken { + mix-blend-mode: darken !important; +} + +.mix-lighten { + mix-blend-mode: lighten !important; +} + +.mix-color-dodge { + mix-blend-mode: color-dodge !important; +} + +.mix-color-burn { + mix-blend-mode: color-burn !important; +} + +.mix-hard-light { + mix-blend-mode: hard-light !important; +} + +.mix-soft-light { + mix-blend-mode: soft-light !important; +} + +.mix-difference { + mix-blend-mode: difference !important; +} + +.mix-exclusion { + mix-blend-mode: exclusion !important; +} + +.mix-hue { + mix-blend-mode: hue !important; +} + +.mix-saturation { + mix-blend-mode: saturation !important; +} + +.mix-color { + mix-blend-mode: color !important; +} + +.mix-luminosity { + mix-blend-mode: luminosity !important; +} + .example { font-weight: 700; color: #ef4444; @@ -57705,6 +57769,70 @@ video { animation: bounce 1s infinite !important; } + .sm\:mix-normal { + mix-blend-mode: normal !important; + } + + .sm\:mix-multiply { + mix-blend-mode: multiply !important; + } + + .sm\:mix-screen { + mix-blend-mode: screen !important; + } + + .sm\:mix-overlay { + mix-blend-mode: overlay !important; + } + + .sm\:mix-darken { + mix-blend-mode: darken !important; + } + + .sm\:mix-lighten { + mix-blend-mode: lighten !important; + } + + .sm\:mix-color-dodge { + mix-blend-mode: color-dodge !important; + } + + .sm\:mix-color-burn { + mix-blend-mode: color-burn !important; + } + + .sm\:mix-hard-light { + mix-blend-mode: hard-light !important; + } + + .sm\:mix-soft-light { + mix-blend-mode: soft-light !important; + } + + .sm\:mix-difference { + mix-blend-mode: difference !important; + } + + .sm\:mix-exclusion { + mix-blend-mode: exclusion !important; + } + + .sm\:mix-hue { + mix-blend-mode: hue !important; + } + + .sm\:mix-saturation { + mix-blend-mode: saturation !important; + } + + .sm\:mix-color { + mix-blend-mode: color !important; + } + + .sm\:mix-luminosity { + mix-blend-mode: luminosity !important; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86270,6 +86398,70 @@ video { animation: bounce 1s infinite !important; } + .md\:mix-normal { + mix-blend-mode: normal !important; + } + + .md\:mix-multiply { + mix-blend-mode: multiply !important; + } + + .md\:mix-screen { + mix-blend-mode: screen !important; + } + + .md\:mix-overlay { + mix-blend-mode: overlay !important; + } + + .md\:mix-darken { + mix-blend-mode: darken !important; + } + + .md\:mix-lighten { + mix-blend-mode: lighten !important; + } + + .md\:mix-color-dodge { + mix-blend-mode: color-dodge !important; + } + + .md\:mix-color-burn { + mix-blend-mode: color-burn !important; + } + + .md\:mix-hard-light { + mix-blend-mode: hard-light !important; + } + + .md\:mix-soft-light { + mix-blend-mode: soft-light !important; + } + + .md\:mix-difference { + mix-blend-mode: difference !important; + } + + .md\:mix-exclusion { + mix-blend-mode: exclusion !important; + } + + .md\:mix-hue { + mix-blend-mode: hue !important; + } + + .md\:mix-saturation { + mix-blend-mode: saturation !important; + } + + .md\:mix-color { + mix-blend-mode: color !important; + } + + .md\:mix-luminosity { + mix-blend-mode: luminosity !important; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -114835,6 +115027,70 @@ video { animation: bounce 1s infinite !important; } + .lg\:mix-normal { + mix-blend-mode: normal !important; + } + + .lg\:mix-multiply { + mix-blend-mode: multiply !important; + } + + .lg\:mix-screen { + mix-blend-mode: screen !important; + } + + .lg\:mix-overlay { + mix-blend-mode: overlay !important; + } + + .lg\:mix-darken { + mix-blend-mode: darken !important; + } + + .lg\:mix-lighten { + mix-blend-mode: lighten !important; + } + + .lg\:mix-color-dodge { + mix-blend-mode: color-dodge !important; + } + + .lg\:mix-color-burn { + mix-blend-mode: color-burn !important; + } + + .lg\:mix-hard-light { + mix-blend-mode: hard-light !important; + } + + .lg\:mix-soft-light { + mix-blend-mode: soft-light !important; + } + + .lg\:mix-difference { + mix-blend-mode: difference !important; + } + + .lg\:mix-exclusion { + mix-blend-mode: exclusion !important; + } + + .lg\:mix-hue { + mix-blend-mode: hue !important; + } + + .lg\:mix-saturation { + mix-blend-mode: saturation !important; + } + + .lg\:mix-color { + mix-blend-mode: color !important; + } + + .lg\:mix-luminosity { + mix-blend-mode: luminosity !important; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143400,6 +143656,70 @@ video { animation: bounce 1s infinite !important; } + .xl\:mix-normal { + mix-blend-mode: normal !important; + } + + .xl\:mix-multiply { + mix-blend-mode: multiply !important; + } + + .xl\:mix-screen { + mix-blend-mode: screen !important; + } + + .xl\:mix-overlay { + mix-blend-mode: overlay !important; + } + + .xl\:mix-darken { + mix-blend-mode: darken !important; + } + + .xl\:mix-lighten { + mix-blend-mode: lighten !important; + } + + .xl\:mix-color-dodge { + mix-blend-mode: color-dodge !important; + } + + .xl\:mix-color-burn { + mix-blend-mode: color-burn !important; + } + + .xl\:mix-hard-light { + mix-blend-mode: hard-light !important; + } + + .xl\:mix-soft-light { + mix-blend-mode: soft-light !important; + } + + .xl\:mix-difference { + mix-blend-mode: difference !important; + } + + .xl\:mix-exclusion { + mix-blend-mode: exclusion !important; + } + + .xl\:mix-hue { + mix-blend-mode: hue !important; + } + + .xl\:mix-saturation { + mix-blend-mode: saturation !important; + } + + .xl\:mix-color { + mix-blend-mode: color !important; + } + + .xl\:mix-luminosity { + mix-blend-mode: luminosity !important; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -171965,6 +172285,70 @@ video { animation: bounce 1s infinite !important; } + .\32xl\:mix-normal { + mix-blend-mode: normal !important; + } + + .\32xl\:mix-multiply { + mix-blend-mode: multiply !important; + } + + .\32xl\:mix-screen { + mix-blend-mode: screen !important; + } + + .\32xl\:mix-overlay { + mix-blend-mode: overlay !important; + } + + .\32xl\:mix-darken { + mix-blend-mode: darken !important; + } + + .\32xl\:mix-lighten { + mix-blend-mode: lighten !important; + } + + .\32xl\:mix-color-dodge { + mix-blend-mode: color-dodge !important; + } + + .\32xl\:mix-color-burn { + mix-blend-mode: color-burn !important; + } + + .\32xl\:mix-hard-light { + mix-blend-mode: hard-light !important; + } + + .\32xl\:mix-soft-light { + mix-blend-mode: soft-light !important; + } + + .\32xl\:mix-difference { + mix-blend-mode: difference !important; + } + + .\32xl\:mix-exclusion { + mix-blend-mode: exclusion !important; + } + + .\32xl\:mix-hue { + mix-blend-mode: hue !important; + } + + .\32xl\:mix-saturation { + mix-blend-mode: saturation !important; + } + + .\32xl\:mix-color { + mix-blend-mode: color !important; + } + + .\32xl\:mix-luminosity { + mix-blend-mode: luminosity !important; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index a04be9a314ed..5833ec5ef574 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -26585,6 +26585,70 @@ video { animation: bounce 1s infinite; } +.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; +} + .example { font-weight: 700; color: #ef4444; @@ -52593,6 +52657,70 @@ video { animation: bounce 1s infinite; } + .sm\:mix-normal { + mix-blend-mode: normal; + } + + .sm\:mix-multiply { + mix-blend-mode: multiply; + } + + .sm\:mix-screen { + mix-blend-mode: screen; + } + + .sm\:mix-overlay { + mix-blend-mode: overlay; + } + + .sm\:mix-darken { + mix-blend-mode: darken; + } + + .sm\:mix-lighten { + mix-blend-mode: lighten; + } + + .sm\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .sm\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .sm\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .sm\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .sm\:mix-difference { + mix-blend-mode: difference; + } + + .sm\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .sm\:mix-hue { + mix-blend-mode: hue; + } + + .sm\:mix-saturation { + mix-blend-mode: saturation; + } + + .sm\:mix-color { + mix-blend-mode: color; + } + + .sm\:mix-luminosity { + mix-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -78602,6 +78730,70 @@ video { animation: bounce 1s infinite; } + .md\:mix-normal { + mix-blend-mode: normal; + } + + .md\:mix-multiply { + mix-blend-mode: multiply; + } + + .md\:mix-screen { + mix-blend-mode: screen; + } + + .md\:mix-overlay { + mix-blend-mode: overlay; + } + + .md\:mix-darken { + mix-blend-mode: darken; + } + + .md\:mix-lighten { + mix-blend-mode: lighten; + } + + .md\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .md\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .md\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .md\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .md\:mix-difference { + mix-blend-mode: difference; + } + + .md\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .md\:mix-hue { + mix-blend-mode: hue; + } + + .md\:mix-saturation { + mix-blend-mode: saturation; + } + + .md\:mix-color { + mix-blend-mode: color; + } + + .md\:mix-luminosity { + mix-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -104611,6 +104803,70 @@ video { animation: bounce 1s infinite; } + .lg\:mix-normal { + mix-blend-mode: normal; + } + + .lg\:mix-multiply { + mix-blend-mode: multiply; + } + + .lg\:mix-screen { + mix-blend-mode: screen; + } + + .lg\:mix-overlay { + mix-blend-mode: overlay; + } + + .lg\:mix-darken { + mix-blend-mode: darken; + } + + .lg\:mix-lighten { + mix-blend-mode: lighten; + } + + .lg\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .lg\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .lg\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .lg\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .lg\:mix-difference { + mix-blend-mode: difference; + } + + .lg\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .lg\:mix-hue { + mix-blend-mode: hue; + } + + .lg\:mix-saturation { + mix-blend-mode: saturation; + } + + .lg\:mix-color { + mix-blend-mode: color; + } + + .lg\:mix-luminosity { + mix-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -130620,6 +130876,70 @@ video { animation: bounce 1s infinite; } + .xl\:mix-normal { + mix-blend-mode: normal; + } + + .xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .xl\:mix-screen { + mix-blend-mode: screen; + } + + .xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .xl\:mix-darken { + mix-blend-mode: darken; + } + + .xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .xl\:mix-difference { + mix-blend-mode: difference; + } + + .xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .xl\:mix-hue { + mix-blend-mode: hue; + } + + .xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .xl\:mix-color { + mix-blend-mode: color; + } + + .xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -156629,6 +156949,70 @@ video { animation: bounce 1s infinite; } + .\32xl\:mix-normal { + mix-blend-mode: normal; + } + + .\32xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .\32xl\:mix-screen { + mix-blend-mode: screen; + } + + .\32xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .\32xl\:mix-darken { + mix-blend-mode: darken; + } + + .\32xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .\32xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .\32xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .\32xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .\32xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .\32xl\:mix-difference { + mix-blend-mode: difference; + } + + .\32xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .\32xl\:mix-hue { + mix-blend-mode: hue; + } + + .\32xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .\32xl\:mix-color { + mix-blend-mode: color; + } + + .\32xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 604473b32b82..3ca58addb6c0 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -29141,6 +29141,70 @@ video { animation: bounce 1s infinite; } +.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; +} + .example { font-weight: 700; color: #ef4444; @@ -57705,6 +57769,70 @@ video { animation: bounce 1s infinite; } + .sm\:mix-normal { + mix-blend-mode: normal; + } + + .sm\:mix-multiply { + mix-blend-mode: multiply; + } + + .sm\:mix-screen { + mix-blend-mode: screen; + } + + .sm\:mix-overlay { + mix-blend-mode: overlay; + } + + .sm\:mix-darken { + mix-blend-mode: darken; + } + + .sm\:mix-lighten { + mix-blend-mode: lighten; + } + + .sm\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .sm\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .sm\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .sm\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .sm\:mix-difference { + mix-blend-mode: difference; + } + + .sm\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .sm\:mix-hue { + mix-blend-mode: hue; + } + + .sm\:mix-saturation { + mix-blend-mode: saturation; + } + + .sm\:mix-color { + mix-blend-mode: color; + } + + .sm\:mix-luminosity { + mix-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86270,6 +86398,70 @@ video { animation: bounce 1s infinite; } + .md\:mix-normal { + mix-blend-mode: normal; + } + + .md\:mix-multiply { + mix-blend-mode: multiply; + } + + .md\:mix-screen { + mix-blend-mode: screen; + } + + .md\:mix-overlay { + mix-blend-mode: overlay; + } + + .md\:mix-darken { + mix-blend-mode: darken; + } + + .md\:mix-lighten { + mix-blend-mode: lighten; + } + + .md\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .md\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .md\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .md\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .md\:mix-difference { + mix-blend-mode: difference; + } + + .md\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .md\:mix-hue { + mix-blend-mode: hue; + } + + .md\:mix-saturation { + mix-blend-mode: saturation; + } + + .md\:mix-color { + mix-blend-mode: color; + } + + .md\:mix-luminosity { + mix-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -114835,6 +115027,70 @@ video { animation: bounce 1s infinite; } + .lg\:mix-normal { + mix-blend-mode: normal; + } + + .lg\:mix-multiply { + mix-blend-mode: multiply; + } + + .lg\:mix-screen { + mix-blend-mode: screen; + } + + .lg\:mix-overlay { + mix-blend-mode: overlay; + } + + .lg\:mix-darken { + mix-blend-mode: darken; + } + + .lg\:mix-lighten { + mix-blend-mode: lighten; + } + + .lg\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .lg\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .lg\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .lg\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .lg\:mix-difference { + mix-blend-mode: difference; + } + + .lg\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .lg\:mix-hue { + mix-blend-mode: hue; + } + + .lg\:mix-saturation { + mix-blend-mode: saturation; + } + + .lg\:mix-color { + mix-blend-mode: color; + } + + .lg\:mix-luminosity { + mix-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143400,6 +143656,70 @@ video { animation: bounce 1s infinite; } + .xl\:mix-normal { + mix-blend-mode: normal; + } + + .xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .xl\:mix-screen { + mix-blend-mode: screen; + } + + .xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .xl\:mix-darken { + mix-blend-mode: darken; + } + + .xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .xl\:mix-difference { + mix-blend-mode: difference; + } + + .xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .xl\:mix-hue { + mix-blend-mode: hue; + } + + .xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .xl\:mix-color { + mix-blend-mode: color; + } + + .xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -171965,6 +172285,70 @@ video { animation: bounce 1s infinite; } + .\32xl\:mix-normal { + mix-blend-mode: normal; + } + + .\32xl\:mix-multiply { + mix-blend-mode: multiply; + } + + .\32xl\:mix-screen { + mix-blend-mode: screen; + } + + .\32xl\:mix-overlay { + mix-blend-mode: overlay; + } + + .\32xl\:mix-darken { + mix-blend-mode: darken; + } + + .\32xl\:mix-lighten { + mix-blend-mode: lighten; + } + + .\32xl\:mix-color-dodge { + mix-blend-mode: color-dodge; + } + + .\32xl\:mix-color-burn { + mix-blend-mode: color-burn; + } + + .\32xl\:mix-hard-light { + mix-blend-mode: hard-light; + } + + .\32xl\:mix-soft-light { + mix-blend-mode: soft-light; + } + + .\32xl\:mix-difference { + mix-blend-mode: difference; + } + + .\32xl\:mix-exclusion { + mix-blend-mode: exclusion; + } + + .\32xl\:mix-hue { + mix-blend-mode: hue; + } + + .\32xl\:mix-saturation { + mix-blend-mode: saturation; + } + + .\32xl\:mix-color { + mix-blend-mode: color; + } + + .\32xl\:mix-luminosity { + mix-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index 33bb94f2c9ee..fb9c6f80de6f 100644 --- 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 new file mode 100644 index 000000000000..7eba2c3e26c4 --- /dev/null +++ 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 index ea3eb98a3781..7c4b83c4977e 100644 --- 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 index 5289c1e50d68..be32ed3cb44b 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -88,6 +88,7 @@
+
diff --git a/src/corePluginList.js b/src/corePluginList.js index 07dd33ebbfae..b52ee346bfea 100644 --- 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 index 8844f40b5a0e..ffb6bd4ed5ae 100644 --- 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 new file mode 100644 index 000000000000..120d5f089faa --- /dev/null +++ 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 index 40a4d82c8cfe..dd3ac35d3976 100644 --- 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'], From 223ddaaf10319a1dfe9664847712aeb72d81e134 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 06:36:47 -0400 Subject: [PATCH 2/3] Rename mix-blend-mode utilities to `mix-blend-*` Co-Authored-By: Peter Neupauer --- .../fixtures/tailwind-output-flagged.css | 192 +++++++++--------- .../fixtures/tailwind-output-important.css | 192 +++++++++--------- .../tailwind-output-no-color-opacity.css | 192 +++++++++--------- __tests__/fixtures/tailwind-output.css | 192 +++++++++--------- jit/tests/basic-usage.test.css | 4 +- jit/tests/basic-usage.test.html | 2 +- src/plugins/mixBlendMode.js | 32 +-- 7 files changed, 403 insertions(+), 403 deletions(-) diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 3ca58addb6c0..92046957b2aa 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -29141,67 +29141,67 @@ video { animation: bounce 1s infinite; } -.mix-normal { +.mix-blend-normal { mix-blend-mode: normal; } -.mix-multiply { +.mix-blend-multiply { mix-blend-mode: multiply; } -.mix-screen { +.mix-blend-screen { mix-blend-mode: screen; } -.mix-overlay { +.mix-blend-overlay { mix-blend-mode: overlay; } -.mix-darken { +.mix-blend-darken { mix-blend-mode: darken; } -.mix-lighten { +.mix-blend-lighten { mix-blend-mode: lighten; } -.mix-color-dodge { +.mix-blend-color-dodge { mix-blend-mode: color-dodge; } -.mix-color-burn { +.mix-blend-color-burn { mix-blend-mode: color-burn; } -.mix-hard-light { +.mix-blend-hard-light { mix-blend-mode: hard-light; } -.mix-soft-light { +.mix-blend-soft-light { mix-blend-mode: soft-light; } -.mix-difference { +.mix-blend-difference { mix-blend-mode: difference; } -.mix-exclusion { +.mix-blend-exclusion { mix-blend-mode: exclusion; } -.mix-hue { +.mix-blend-hue { mix-blend-mode: hue; } -.mix-saturation { +.mix-blend-saturation { mix-blend-mode: saturation; } -.mix-color { +.mix-blend-color { mix-blend-mode: color; } -.mix-luminosity { +.mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -57769,67 +57769,67 @@ video { animation: bounce 1s infinite; } - .sm\:mix-normal { + .sm\:mix-blend-normal { mix-blend-mode: normal; } - .sm\:mix-multiply { + .sm\:mix-blend-multiply { mix-blend-mode: multiply; } - .sm\:mix-screen { + .sm\:mix-blend-screen { mix-blend-mode: screen; } - .sm\:mix-overlay { + .sm\:mix-blend-overlay { mix-blend-mode: overlay; } - .sm\:mix-darken { + .sm\:mix-blend-darken { mix-blend-mode: darken; } - .sm\:mix-lighten { + .sm\:mix-blend-lighten { mix-blend-mode: lighten; } - .sm\:mix-color-dodge { + .sm\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .sm\:mix-color-burn { + .sm\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .sm\:mix-hard-light { + .sm\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .sm\:mix-soft-light { + .sm\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .sm\:mix-difference { + .sm\:mix-blend-difference { mix-blend-mode: difference; } - .sm\:mix-exclusion { + .sm\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .sm\:mix-hue { + .sm\:mix-blend-hue { mix-blend-mode: hue; } - .sm\:mix-saturation { + .sm\:mix-blend-saturation { mix-blend-mode: saturation; } - .sm\:mix-color { + .sm\:mix-blend-color { mix-blend-mode: color; } - .sm\:mix-luminosity { + .sm\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -86398,67 +86398,67 @@ video { animation: bounce 1s infinite; } - .md\:mix-normal { + .md\:mix-blend-normal { mix-blend-mode: normal; } - .md\:mix-multiply { + .md\:mix-blend-multiply { mix-blend-mode: multiply; } - .md\:mix-screen { + .md\:mix-blend-screen { mix-blend-mode: screen; } - .md\:mix-overlay { + .md\:mix-blend-overlay { mix-blend-mode: overlay; } - .md\:mix-darken { + .md\:mix-blend-darken { mix-blend-mode: darken; } - .md\:mix-lighten { + .md\:mix-blend-lighten { mix-blend-mode: lighten; } - .md\:mix-color-dodge { + .md\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .md\:mix-color-burn { + .md\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .md\:mix-hard-light { + .md\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .md\:mix-soft-light { + .md\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .md\:mix-difference { + .md\:mix-blend-difference { mix-blend-mode: difference; } - .md\:mix-exclusion { + .md\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .md\:mix-hue { + .md\:mix-blend-hue { mix-blend-mode: hue; } - .md\:mix-saturation { + .md\:mix-blend-saturation { mix-blend-mode: saturation; } - .md\:mix-color { + .md\:mix-blend-color { mix-blend-mode: color; } - .md\:mix-luminosity { + .md\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -115027,67 +115027,67 @@ video { animation: bounce 1s infinite; } - .lg\:mix-normal { + .lg\:mix-blend-normal { mix-blend-mode: normal; } - .lg\:mix-multiply { + .lg\:mix-blend-multiply { mix-blend-mode: multiply; } - .lg\:mix-screen { + .lg\:mix-blend-screen { mix-blend-mode: screen; } - .lg\:mix-overlay { + .lg\:mix-blend-overlay { mix-blend-mode: overlay; } - .lg\:mix-darken { + .lg\:mix-blend-darken { mix-blend-mode: darken; } - .lg\:mix-lighten { + .lg\:mix-blend-lighten { mix-blend-mode: lighten; } - .lg\:mix-color-dodge { + .lg\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .lg\:mix-color-burn { + .lg\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .lg\:mix-hard-light { + .lg\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .lg\:mix-soft-light { + .lg\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .lg\:mix-difference { + .lg\:mix-blend-difference { mix-blend-mode: difference; } - .lg\:mix-exclusion { + .lg\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .lg\:mix-hue { + .lg\:mix-blend-hue { mix-blend-mode: hue; } - .lg\:mix-saturation { + .lg\:mix-blend-saturation { mix-blend-mode: saturation; } - .lg\:mix-color { + .lg\:mix-blend-color { mix-blend-mode: color; } - .lg\:mix-luminosity { + .lg\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -143656,67 +143656,67 @@ video { animation: bounce 1s infinite; } - .xl\:mix-normal { + .xl\:mix-blend-normal { mix-blend-mode: normal; } - .xl\:mix-multiply { + .xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .xl\:mix-screen { + .xl\:mix-blend-screen { mix-blend-mode: screen; } - .xl\:mix-overlay { + .xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .xl\:mix-darken { + .xl\:mix-blend-darken { mix-blend-mode: darken; } - .xl\:mix-lighten { + .xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .xl\:mix-color-dodge { + .xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .xl\:mix-color-burn { + .xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .xl\:mix-hard-light { + .xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .xl\:mix-soft-light { + .xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .xl\:mix-difference { + .xl\:mix-blend-difference { mix-blend-mode: difference; } - .xl\:mix-exclusion { + .xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .xl\:mix-hue { + .xl\:mix-blend-hue { mix-blend-mode: hue; } - .xl\:mix-saturation { + .xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .xl\:mix-color { + .xl\:mix-blend-color { mix-blend-mode: color; } - .xl\:mix-luminosity { + .xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -172285,67 +172285,67 @@ video { animation: bounce 1s infinite; } - .\32xl\:mix-normal { + .\32xl\:mix-blend-normal { mix-blend-mode: normal; } - .\32xl\:mix-multiply { + .\32xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .\32xl\:mix-screen { + .\32xl\:mix-blend-screen { mix-blend-mode: screen; } - .\32xl\:mix-overlay { + .\32xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .\32xl\:mix-darken { + .\32xl\:mix-blend-darken { mix-blend-mode: darken; } - .\32xl\:mix-lighten { + .\32xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .\32xl\:mix-color-dodge { + .\32xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .\32xl\:mix-color-burn { + .\32xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .\32xl\:mix-hard-light { + .\32xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .\32xl\:mix-soft-light { + .\32xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .\32xl\:mix-difference { + .\32xl\:mix-blend-difference { mix-blend-mode: difference; } - .\32xl\:mix-exclusion { + .\32xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .\32xl\:mix-hue { + .\32xl\:mix-blend-hue { mix-blend-mode: hue; } - .\32xl\:mix-saturation { + .\32xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .\32xl\:mix-color { + .\32xl\:mix-blend-color { mix-blend-mode: color; } - .\32xl\:mix-luminosity { + .\32xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index fac86845fec2..020525da6a04 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -29141,67 +29141,67 @@ video { animation: bounce 1s infinite !important; } -.mix-normal { +.mix-blend-normal { mix-blend-mode: normal !important; } -.mix-multiply { +.mix-blend-multiply { mix-blend-mode: multiply !important; } -.mix-screen { +.mix-blend-screen { mix-blend-mode: screen !important; } -.mix-overlay { +.mix-blend-overlay { mix-blend-mode: overlay !important; } -.mix-darken { +.mix-blend-darken { mix-blend-mode: darken !important; } -.mix-lighten { +.mix-blend-lighten { mix-blend-mode: lighten !important; } -.mix-color-dodge { +.mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } -.mix-color-burn { +.mix-blend-color-burn { mix-blend-mode: color-burn !important; } -.mix-hard-light { +.mix-blend-hard-light { mix-blend-mode: hard-light !important; } -.mix-soft-light { +.mix-blend-soft-light { mix-blend-mode: soft-light !important; } -.mix-difference { +.mix-blend-difference { mix-blend-mode: difference !important; } -.mix-exclusion { +.mix-blend-exclusion { mix-blend-mode: exclusion !important; } -.mix-hue { +.mix-blend-hue { mix-blend-mode: hue !important; } -.mix-saturation { +.mix-blend-saturation { mix-blend-mode: saturation !important; } -.mix-color { +.mix-blend-color { mix-blend-mode: color !important; } -.mix-luminosity { +.mix-blend-luminosity { mix-blend-mode: luminosity !important; } @@ -57769,67 +57769,67 @@ video { animation: bounce 1s infinite !important; } - .sm\:mix-normal { + .sm\:mix-blend-normal { mix-blend-mode: normal !important; } - .sm\:mix-multiply { + .sm\:mix-blend-multiply { mix-blend-mode: multiply !important; } - .sm\:mix-screen { + .sm\:mix-blend-screen { mix-blend-mode: screen !important; } - .sm\:mix-overlay { + .sm\:mix-blend-overlay { mix-blend-mode: overlay !important; } - .sm\:mix-darken { + .sm\:mix-blend-darken { mix-blend-mode: darken !important; } - .sm\:mix-lighten { + .sm\:mix-blend-lighten { mix-blend-mode: lighten !important; } - .sm\:mix-color-dodge { + .sm\:mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } - .sm\:mix-color-burn { + .sm\:mix-blend-color-burn { mix-blend-mode: color-burn !important; } - .sm\:mix-hard-light { + .sm\:mix-blend-hard-light { mix-blend-mode: hard-light !important; } - .sm\:mix-soft-light { + .sm\:mix-blend-soft-light { mix-blend-mode: soft-light !important; } - .sm\:mix-difference { + .sm\:mix-blend-difference { mix-blend-mode: difference !important; } - .sm\:mix-exclusion { + .sm\:mix-blend-exclusion { mix-blend-mode: exclusion !important; } - .sm\:mix-hue { + .sm\:mix-blend-hue { mix-blend-mode: hue !important; } - .sm\:mix-saturation { + .sm\:mix-blend-saturation { mix-blend-mode: saturation !important; } - .sm\:mix-color { + .sm\:mix-blend-color { mix-blend-mode: color !important; } - .sm\:mix-luminosity { + .sm\:mix-blend-luminosity { mix-blend-mode: luminosity !important; } @@ -86398,67 +86398,67 @@ video { animation: bounce 1s infinite !important; } - .md\:mix-normal { + .md\:mix-blend-normal { mix-blend-mode: normal !important; } - .md\:mix-multiply { + .md\:mix-blend-multiply { mix-blend-mode: multiply !important; } - .md\:mix-screen { + .md\:mix-blend-screen { mix-blend-mode: screen !important; } - .md\:mix-overlay { + .md\:mix-blend-overlay { mix-blend-mode: overlay !important; } - .md\:mix-darken { + .md\:mix-blend-darken { mix-blend-mode: darken !important; } - .md\:mix-lighten { + .md\:mix-blend-lighten { mix-blend-mode: lighten !important; } - .md\:mix-color-dodge { + .md\:mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } - .md\:mix-color-burn { + .md\:mix-blend-color-burn { mix-blend-mode: color-burn !important; } - .md\:mix-hard-light { + .md\:mix-blend-hard-light { mix-blend-mode: hard-light !important; } - .md\:mix-soft-light { + .md\:mix-blend-soft-light { mix-blend-mode: soft-light !important; } - .md\:mix-difference { + .md\:mix-blend-difference { mix-blend-mode: difference !important; } - .md\:mix-exclusion { + .md\:mix-blend-exclusion { mix-blend-mode: exclusion !important; } - .md\:mix-hue { + .md\:mix-blend-hue { mix-blend-mode: hue !important; } - .md\:mix-saturation { + .md\:mix-blend-saturation { mix-blend-mode: saturation !important; } - .md\:mix-color { + .md\:mix-blend-color { mix-blend-mode: color !important; } - .md\:mix-luminosity { + .md\:mix-blend-luminosity { mix-blend-mode: luminosity !important; } @@ -115027,67 +115027,67 @@ video { animation: bounce 1s infinite !important; } - .lg\:mix-normal { + .lg\:mix-blend-normal { mix-blend-mode: normal !important; } - .lg\:mix-multiply { + .lg\:mix-blend-multiply { mix-blend-mode: multiply !important; } - .lg\:mix-screen { + .lg\:mix-blend-screen { mix-blend-mode: screen !important; } - .lg\:mix-overlay { + .lg\:mix-blend-overlay { mix-blend-mode: overlay !important; } - .lg\:mix-darken { + .lg\:mix-blend-darken { mix-blend-mode: darken !important; } - .lg\:mix-lighten { + .lg\:mix-blend-lighten { mix-blend-mode: lighten !important; } - .lg\:mix-color-dodge { + .lg\:mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } - .lg\:mix-color-burn { + .lg\:mix-blend-color-burn { mix-blend-mode: color-burn !important; } - .lg\:mix-hard-light { + .lg\:mix-blend-hard-light { mix-blend-mode: hard-light !important; } - .lg\:mix-soft-light { + .lg\:mix-blend-soft-light { mix-blend-mode: soft-light !important; } - .lg\:mix-difference { + .lg\:mix-blend-difference { mix-blend-mode: difference !important; } - .lg\:mix-exclusion { + .lg\:mix-blend-exclusion { mix-blend-mode: exclusion !important; } - .lg\:mix-hue { + .lg\:mix-blend-hue { mix-blend-mode: hue !important; } - .lg\:mix-saturation { + .lg\:mix-blend-saturation { mix-blend-mode: saturation !important; } - .lg\:mix-color { + .lg\:mix-blend-color { mix-blend-mode: color !important; } - .lg\:mix-luminosity { + .lg\:mix-blend-luminosity { mix-blend-mode: luminosity !important; } @@ -143656,67 +143656,67 @@ video { animation: bounce 1s infinite !important; } - .xl\:mix-normal { + .xl\:mix-blend-normal { mix-blend-mode: normal !important; } - .xl\:mix-multiply { + .xl\:mix-blend-multiply { mix-blend-mode: multiply !important; } - .xl\:mix-screen { + .xl\:mix-blend-screen { mix-blend-mode: screen !important; } - .xl\:mix-overlay { + .xl\:mix-blend-overlay { mix-blend-mode: overlay !important; } - .xl\:mix-darken { + .xl\:mix-blend-darken { mix-blend-mode: darken !important; } - .xl\:mix-lighten { + .xl\:mix-blend-lighten { mix-blend-mode: lighten !important; } - .xl\:mix-color-dodge { + .xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } - .xl\:mix-color-burn { + .xl\:mix-blend-color-burn { mix-blend-mode: color-burn !important; } - .xl\:mix-hard-light { + .xl\:mix-blend-hard-light { mix-blend-mode: hard-light !important; } - .xl\:mix-soft-light { + .xl\:mix-blend-soft-light { mix-blend-mode: soft-light !important; } - .xl\:mix-difference { + .xl\:mix-blend-difference { mix-blend-mode: difference !important; } - .xl\:mix-exclusion { + .xl\:mix-blend-exclusion { mix-blend-mode: exclusion !important; } - .xl\:mix-hue { + .xl\:mix-blend-hue { mix-blend-mode: hue !important; } - .xl\:mix-saturation { + .xl\:mix-blend-saturation { mix-blend-mode: saturation !important; } - .xl\:mix-color { + .xl\:mix-blend-color { mix-blend-mode: color !important; } - .xl\:mix-luminosity { + .xl\:mix-blend-luminosity { mix-blend-mode: luminosity !important; } @@ -172285,67 +172285,67 @@ video { animation: bounce 1s infinite !important; } - .\32xl\:mix-normal { + .\32xl\:mix-blend-normal { mix-blend-mode: normal !important; } - .\32xl\:mix-multiply { + .\32xl\:mix-blend-multiply { mix-blend-mode: multiply !important; } - .\32xl\:mix-screen { + .\32xl\:mix-blend-screen { mix-blend-mode: screen !important; } - .\32xl\:mix-overlay { + .\32xl\:mix-blend-overlay { mix-blend-mode: overlay !important; } - .\32xl\:mix-darken { + .\32xl\:mix-blend-darken { mix-blend-mode: darken !important; } - .\32xl\:mix-lighten { + .\32xl\:mix-blend-lighten { mix-blend-mode: lighten !important; } - .\32xl\:mix-color-dodge { + .\32xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge !important; } - .\32xl\:mix-color-burn { + .\32xl\:mix-blend-color-burn { mix-blend-mode: color-burn !important; } - .\32xl\:mix-hard-light { + .\32xl\:mix-blend-hard-light { mix-blend-mode: hard-light !important; } - .\32xl\:mix-soft-light { + .\32xl\:mix-blend-soft-light { mix-blend-mode: soft-light !important; } - .\32xl\:mix-difference { + .\32xl\:mix-blend-difference { mix-blend-mode: difference !important; } - .\32xl\:mix-exclusion { + .\32xl\:mix-blend-exclusion { mix-blend-mode: exclusion !important; } - .\32xl\:mix-hue { + .\32xl\:mix-blend-hue { mix-blend-mode: hue !important; } - .\32xl\:mix-saturation { + .\32xl\:mix-blend-saturation { mix-blend-mode: saturation !important; } - .\32xl\:mix-color { + .\32xl\:mix-blend-color { mix-blend-mode: color !important; } - .\32xl\:mix-luminosity { + .\32xl\:mix-blend-luminosity { mix-blend-mode: luminosity !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 5833ec5ef574..a17aa0fefefd 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -26585,67 +26585,67 @@ video { animation: bounce 1s infinite; } -.mix-normal { +.mix-blend-normal { mix-blend-mode: normal; } -.mix-multiply { +.mix-blend-multiply { mix-blend-mode: multiply; } -.mix-screen { +.mix-blend-screen { mix-blend-mode: screen; } -.mix-overlay { +.mix-blend-overlay { mix-blend-mode: overlay; } -.mix-darken { +.mix-blend-darken { mix-blend-mode: darken; } -.mix-lighten { +.mix-blend-lighten { mix-blend-mode: lighten; } -.mix-color-dodge { +.mix-blend-color-dodge { mix-blend-mode: color-dodge; } -.mix-color-burn { +.mix-blend-color-burn { mix-blend-mode: color-burn; } -.mix-hard-light { +.mix-blend-hard-light { mix-blend-mode: hard-light; } -.mix-soft-light { +.mix-blend-soft-light { mix-blend-mode: soft-light; } -.mix-difference { +.mix-blend-difference { mix-blend-mode: difference; } -.mix-exclusion { +.mix-blend-exclusion { mix-blend-mode: exclusion; } -.mix-hue { +.mix-blend-hue { mix-blend-mode: hue; } -.mix-saturation { +.mix-blend-saturation { mix-blend-mode: saturation; } -.mix-color { +.mix-blend-color { mix-blend-mode: color; } -.mix-luminosity { +.mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -52657,67 +52657,67 @@ video { animation: bounce 1s infinite; } - .sm\:mix-normal { + .sm\:mix-blend-normal { mix-blend-mode: normal; } - .sm\:mix-multiply { + .sm\:mix-blend-multiply { mix-blend-mode: multiply; } - .sm\:mix-screen { + .sm\:mix-blend-screen { mix-blend-mode: screen; } - .sm\:mix-overlay { + .sm\:mix-blend-overlay { mix-blend-mode: overlay; } - .sm\:mix-darken { + .sm\:mix-blend-darken { mix-blend-mode: darken; } - .sm\:mix-lighten { + .sm\:mix-blend-lighten { mix-blend-mode: lighten; } - .sm\:mix-color-dodge { + .sm\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .sm\:mix-color-burn { + .sm\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .sm\:mix-hard-light { + .sm\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .sm\:mix-soft-light { + .sm\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .sm\:mix-difference { + .sm\:mix-blend-difference { mix-blend-mode: difference; } - .sm\:mix-exclusion { + .sm\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .sm\:mix-hue { + .sm\:mix-blend-hue { mix-blend-mode: hue; } - .sm\:mix-saturation { + .sm\:mix-blend-saturation { mix-blend-mode: saturation; } - .sm\:mix-color { + .sm\:mix-blend-color { mix-blend-mode: color; } - .sm\:mix-luminosity { + .sm\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -78730,67 +78730,67 @@ video { animation: bounce 1s infinite; } - .md\:mix-normal { + .md\:mix-blend-normal { mix-blend-mode: normal; } - .md\:mix-multiply { + .md\:mix-blend-multiply { mix-blend-mode: multiply; } - .md\:mix-screen { + .md\:mix-blend-screen { mix-blend-mode: screen; } - .md\:mix-overlay { + .md\:mix-blend-overlay { mix-blend-mode: overlay; } - .md\:mix-darken { + .md\:mix-blend-darken { mix-blend-mode: darken; } - .md\:mix-lighten { + .md\:mix-blend-lighten { mix-blend-mode: lighten; } - .md\:mix-color-dodge { + .md\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .md\:mix-color-burn { + .md\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .md\:mix-hard-light { + .md\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .md\:mix-soft-light { + .md\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .md\:mix-difference { + .md\:mix-blend-difference { mix-blend-mode: difference; } - .md\:mix-exclusion { + .md\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .md\:mix-hue { + .md\:mix-blend-hue { mix-blend-mode: hue; } - .md\:mix-saturation { + .md\:mix-blend-saturation { mix-blend-mode: saturation; } - .md\:mix-color { + .md\:mix-blend-color { mix-blend-mode: color; } - .md\:mix-luminosity { + .md\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -104803,67 +104803,67 @@ video { animation: bounce 1s infinite; } - .lg\:mix-normal { + .lg\:mix-blend-normal { mix-blend-mode: normal; } - .lg\:mix-multiply { + .lg\:mix-blend-multiply { mix-blend-mode: multiply; } - .lg\:mix-screen { + .lg\:mix-blend-screen { mix-blend-mode: screen; } - .lg\:mix-overlay { + .lg\:mix-blend-overlay { mix-blend-mode: overlay; } - .lg\:mix-darken { + .lg\:mix-blend-darken { mix-blend-mode: darken; } - .lg\:mix-lighten { + .lg\:mix-blend-lighten { mix-blend-mode: lighten; } - .lg\:mix-color-dodge { + .lg\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .lg\:mix-color-burn { + .lg\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .lg\:mix-hard-light { + .lg\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .lg\:mix-soft-light { + .lg\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .lg\:mix-difference { + .lg\:mix-blend-difference { mix-blend-mode: difference; } - .lg\:mix-exclusion { + .lg\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .lg\:mix-hue { + .lg\:mix-blend-hue { mix-blend-mode: hue; } - .lg\:mix-saturation { + .lg\:mix-blend-saturation { mix-blend-mode: saturation; } - .lg\:mix-color { + .lg\:mix-blend-color { mix-blend-mode: color; } - .lg\:mix-luminosity { + .lg\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -130876,67 +130876,67 @@ video { animation: bounce 1s infinite; } - .xl\:mix-normal { + .xl\:mix-blend-normal { mix-blend-mode: normal; } - .xl\:mix-multiply { + .xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .xl\:mix-screen { + .xl\:mix-blend-screen { mix-blend-mode: screen; } - .xl\:mix-overlay { + .xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .xl\:mix-darken { + .xl\:mix-blend-darken { mix-blend-mode: darken; } - .xl\:mix-lighten { + .xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .xl\:mix-color-dodge { + .xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .xl\:mix-color-burn { + .xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .xl\:mix-hard-light { + .xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .xl\:mix-soft-light { + .xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .xl\:mix-difference { + .xl\:mix-blend-difference { mix-blend-mode: difference; } - .xl\:mix-exclusion { + .xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .xl\:mix-hue { + .xl\:mix-blend-hue { mix-blend-mode: hue; } - .xl\:mix-saturation { + .xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .xl\:mix-color { + .xl\:mix-blend-color { mix-blend-mode: color; } - .xl\:mix-luminosity { + .xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -156949,67 +156949,67 @@ video { animation: bounce 1s infinite; } - .\32xl\:mix-normal { + .\32xl\:mix-blend-normal { mix-blend-mode: normal; } - .\32xl\:mix-multiply { + .\32xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .\32xl\:mix-screen { + .\32xl\:mix-blend-screen { mix-blend-mode: screen; } - .\32xl\:mix-overlay { + .\32xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .\32xl\:mix-darken { + .\32xl\:mix-blend-darken { mix-blend-mode: darken; } - .\32xl\:mix-lighten { + .\32xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .\32xl\:mix-color-dodge { + .\32xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .\32xl\:mix-color-burn { + .\32xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .\32xl\:mix-hard-light { + .\32xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .\32xl\:mix-soft-light { + .\32xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .\32xl\:mix-difference { + .\32xl\:mix-blend-difference { mix-blend-mode: difference; } - .\32xl\:mix-exclusion { + .\32xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .\32xl\:mix-hue { + .\32xl\:mix-blend-hue { mix-blend-mode: hue; } - .\32xl\:mix-saturation { + .\32xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .\32xl\:mix-color { + .\32xl\:mix-blend-color { mix-blend-mode: color; } - .\32xl\:mix-luminosity { + .\32xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 3ca58addb6c0..92046957b2aa 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -29141,67 +29141,67 @@ video { animation: bounce 1s infinite; } -.mix-normal { +.mix-blend-normal { mix-blend-mode: normal; } -.mix-multiply { +.mix-blend-multiply { mix-blend-mode: multiply; } -.mix-screen { +.mix-blend-screen { mix-blend-mode: screen; } -.mix-overlay { +.mix-blend-overlay { mix-blend-mode: overlay; } -.mix-darken { +.mix-blend-darken { mix-blend-mode: darken; } -.mix-lighten { +.mix-blend-lighten { mix-blend-mode: lighten; } -.mix-color-dodge { +.mix-blend-color-dodge { mix-blend-mode: color-dodge; } -.mix-color-burn { +.mix-blend-color-burn { mix-blend-mode: color-burn; } -.mix-hard-light { +.mix-blend-hard-light { mix-blend-mode: hard-light; } -.mix-soft-light { +.mix-blend-soft-light { mix-blend-mode: soft-light; } -.mix-difference { +.mix-blend-difference { mix-blend-mode: difference; } -.mix-exclusion { +.mix-blend-exclusion { mix-blend-mode: exclusion; } -.mix-hue { +.mix-blend-hue { mix-blend-mode: hue; } -.mix-saturation { +.mix-blend-saturation { mix-blend-mode: saturation; } -.mix-color { +.mix-blend-color { mix-blend-mode: color; } -.mix-luminosity { +.mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -57769,67 +57769,67 @@ video { animation: bounce 1s infinite; } - .sm\:mix-normal { + .sm\:mix-blend-normal { mix-blend-mode: normal; } - .sm\:mix-multiply { + .sm\:mix-blend-multiply { mix-blend-mode: multiply; } - .sm\:mix-screen { + .sm\:mix-blend-screen { mix-blend-mode: screen; } - .sm\:mix-overlay { + .sm\:mix-blend-overlay { mix-blend-mode: overlay; } - .sm\:mix-darken { + .sm\:mix-blend-darken { mix-blend-mode: darken; } - .sm\:mix-lighten { + .sm\:mix-blend-lighten { mix-blend-mode: lighten; } - .sm\:mix-color-dodge { + .sm\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .sm\:mix-color-burn { + .sm\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .sm\:mix-hard-light { + .sm\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .sm\:mix-soft-light { + .sm\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .sm\:mix-difference { + .sm\:mix-blend-difference { mix-blend-mode: difference; } - .sm\:mix-exclusion { + .sm\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .sm\:mix-hue { + .sm\:mix-blend-hue { mix-blend-mode: hue; } - .sm\:mix-saturation { + .sm\:mix-blend-saturation { mix-blend-mode: saturation; } - .sm\:mix-color { + .sm\:mix-blend-color { mix-blend-mode: color; } - .sm\:mix-luminosity { + .sm\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -86398,67 +86398,67 @@ video { animation: bounce 1s infinite; } - .md\:mix-normal { + .md\:mix-blend-normal { mix-blend-mode: normal; } - .md\:mix-multiply { + .md\:mix-blend-multiply { mix-blend-mode: multiply; } - .md\:mix-screen { + .md\:mix-blend-screen { mix-blend-mode: screen; } - .md\:mix-overlay { + .md\:mix-blend-overlay { mix-blend-mode: overlay; } - .md\:mix-darken { + .md\:mix-blend-darken { mix-blend-mode: darken; } - .md\:mix-lighten { + .md\:mix-blend-lighten { mix-blend-mode: lighten; } - .md\:mix-color-dodge { + .md\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .md\:mix-color-burn { + .md\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .md\:mix-hard-light { + .md\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .md\:mix-soft-light { + .md\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .md\:mix-difference { + .md\:mix-blend-difference { mix-blend-mode: difference; } - .md\:mix-exclusion { + .md\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .md\:mix-hue { + .md\:mix-blend-hue { mix-blend-mode: hue; } - .md\:mix-saturation { + .md\:mix-blend-saturation { mix-blend-mode: saturation; } - .md\:mix-color { + .md\:mix-blend-color { mix-blend-mode: color; } - .md\:mix-luminosity { + .md\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -115027,67 +115027,67 @@ video { animation: bounce 1s infinite; } - .lg\:mix-normal { + .lg\:mix-blend-normal { mix-blend-mode: normal; } - .lg\:mix-multiply { + .lg\:mix-blend-multiply { mix-blend-mode: multiply; } - .lg\:mix-screen { + .lg\:mix-blend-screen { mix-blend-mode: screen; } - .lg\:mix-overlay { + .lg\:mix-blend-overlay { mix-blend-mode: overlay; } - .lg\:mix-darken { + .lg\:mix-blend-darken { mix-blend-mode: darken; } - .lg\:mix-lighten { + .lg\:mix-blend-lighten { mix-blend-mode: lighten; } - .lg\:mix-color-dodge { + .lg\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .lg\:mix-color-burn { + .lg\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .lg\:mix-hard-light { + .lg\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .lg\:mix-soft-light { + .lg\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .lg\:mix-difference { + .lg\:mix-blend-difference { mix-blend-mode: difference; } - .lg\:mix-exclusion { + .lg\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .lg\:mix-hue { + .lg\:mix-blend-hue { mix-blend-mode: hue; } - .lg\:mix-saturation { + .lg\:mix-blend-saturation { mix-blend-mode: saturation; } - .lg\:mix-color { + .lg\:mix-blend-color { mix-blend-mode: color; } - .lg\:mix-luminosity { + .lg\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -143656,67 +143656,67 @@ video { animation: bounce 1s infinite; } - .xl\:mix-normal { + .xl\:mix-blend-normal { mix-blend-mode: normal; } - .xl\:mix-multiply { + .xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .xl\:mix-screen { + .xl\:mix-blend-screen { mix-blend-mode: screen; } - .xl\:mix-overlay { + .xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .xl\:mix-darken { + .xl\:mix-blend-darken { mix-blend-mode: darken; } - .xl\:mix-lighten { + .xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .xl\:mix-color-dodge { + .xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .xl\:mix-color-burn { + .xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .xl\:mix-hard-light { + .xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .xl\:mix-soft-light { + .xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .xl\:mix-difference { + .xl\:mix-blend-difference { mix-blend-mode: difference; } - .xl\:mix-exclusion { + .xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .xl\:mix-hue { + .xl\:mix-blend-hue { mix-blend-mode: hue; } - .xl\:mix-saturation { + .xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .xl\:mix-color { + .xl\:mix-blend-color { mix-blend-mode: color; } - .xl\:mix-luminosity { + .xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } @@ -172285,67 +172285,67 @@ video { animation: bounce 1s infinite; } - .\32xl\:mix-normal { + .\32xl\:mix-blend-normal { mix-blend-mode: normal; } - .\32xl\:mix-multiply { + .\32xl\:mix-blend-multiply { mix-blend-mode: multiply; } - .\32xl\:mix-screen { + .\32xl\:mix-blend-screen { mix-blend-mode: screen; } - .\32xl\:mix-overlay { + .\32xl\:mix-blend-overlay { mix-blend-mode: overlay; } - .\32xl\:mix-darken { + .\32xl\:mix-blend-darken { mix-blend-mode: darken; } - .\32xl\:mix-lighten { + .\32xl\:mix-blend-lighten { mix-blend-mode: lighten; } - .\32xl\:mix-color-dodge { + .\32xl\:mix-blend-color-dodge { mix-blend-mode: color-dodge; } - .\32xl\:mix-color-burn { + .\32xl\:mix-blend-color-burn { mix-blend-mode: color-burn; } - .\32xl\:mix-hard-light { + .\32xl\:mix-blend-hard-light { mix-blend-mode: hard-light; } - .\32xl\:mix-soft-light { + .\32xl\:mix-blend-soft-light { mix-blend-mode: soft-light; } - .\32xl\:mix-difference { + .\32xl\:mix-blend-difference { mix-blend-mode: difference; } - .\32xl\:mix-exclusion { + .\32xl\:mix-blend-exclusion { mix-blend-mode: exclusion; } - .\32xl\:mix-hue { + .\32xl\:mix-blend-hue { mix-blend-mode: hue; } - .\32xl\:mix-saturation { + .\32xl\:mix-blend-saturation { mix-blend-mode: saturation; } - .\32xl\:mix-color { + .\32xl\:mix-blend-color { mix-blend-mode: color; } - .\32xl\:mix-luminosity { + .\32xl\:mix-blend-luminosity { mix-blend-mode: luminosity; } diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 7c4b83c4977e..4aad5747ed93 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -576,10 +576,10 @@ .opacity-90 { opacity: 0.9; } -.mix-multiply { +.mix-blend-multiply { mix-blend-mode: multiply; } -.mix-saturation { +.mix-blend-saturation { mix-blend-mode: saturation; } .shadow-md { diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index be32ed3cb44b..24dea24d9d18 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -88,7 +88,7 @@
-
+
diff --git a/src/plugins/mixBlendMode.js b/src/plugins/mixBlendMode.js index 120d5f089faa..652ce0a2a850 100644 --- a/src/plugins/mixBlendMode.js +++ b/src/plugins/mixBlendMode.js @@ -2,22 +2,22 @@ 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' }, + '.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' }, }, variants('mixBlendMode') ) From 6f02d6d2fca75ec7d200d467ecefc5695a5b5f00 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sun, 4 Apr 2021 06:42:37 -0400 Subject: [PATCH 3/3] Add `background-blend-mode` utilities Co-Authored-By: Peter Neupauer --- .../fixtures/tailwind-output-flagged.css | 384 ++++++++++++++++++ .../fixtures/tailwind-output-important.css | 384 ++++++++++++++++++ .../tailwind-output-no-color-opacity.css | 384 ++++++++++++++++++ __tests__/fixtures/tailwind-output.css | 384 ++++++++++++++++++ jit/corePlugins/backgroundBlendMode.js | 1 + jit/corePlugins/index.js | 1 + jit/tests/basic-usage.test.css | 6 + jit/tests/basic-usage.test.html | 1 + src/corePluginList.js | 1 + src/plugins/backgroundBlendMode.js | 25 ++ src/plugins/index.js | 1 + stubs/defaultConfig.stub.js | 1 + 12 files changed, 1573 insertions(+) create mode 100644 jit/corePlugins/backgroundBlendMode.js create mode 100644 src/plugins/backgroundBlendMode.js diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index 92046957b2aa..b323f0cc0951 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -29205,6 +29205,70 @@ video { 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; +} + .example { font-weight: 700; color: #ef4444; @@ -57833,6 +57897,70 @@ video { mix-blend-mode: luminosity; } + .sm\:bg-blend-normal { + background-blend-mode: normal; + } + + .sm\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .sm\:bg-blend-screen { + background-blend-mode: screen; + } + + .sm\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .sm\:bg-blend-darken { + background-blend-mode: darken; + } + + .sm\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .sm\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .sm\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .sm\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .sm\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .sm\:bg-blend-difference { + background-blend-mode: difference; + } + + .sm\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .sm\:bg-blend-hue { + background-blend-mode: hue; + } + + .sm\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .sm\:bg-blend-color { + background-blend-mode: color; + } + + .sm\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86462,6 +86590,70 @@ video { mix-blend-mode: luminosity; } + .md\:bg-blend-normal { + background-blend-mode: normal; + } + + .md\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .md\:bg-blend-screen { + background-blend-mode: screen; + } + + .md\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .md\:bg-blend-darken { + background-blend-mode: darken; + } + + .md\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .md\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .md\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .md\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .md\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .md\:bg-blend-difference { + background-blend-mode: difference; + } + + .md\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .md\:bg-blend-hue { + background-blend-mode: hue; + } + + .md\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .md\:bg-blend-color { + background-blend-mode: color; + } + + .md\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -115091,6 +115283,70 @@ video { mix-blend-mode: luminosity; } + .lg\:bg-blend-normal { + background-blend-mode: normal; + } + + .lg\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .lg\:bg-blend-screen { + background-blend-mode: screen; + } + + .lg\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .lg\:bg-blend-darken { + background-blend-mode: darken; + } + + .lg\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .lg\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .lg\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .lg\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .lg\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .lg\:bg-blend-difference { + background-blend-mode: difference; + } + + .lg\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .lg\:bg-blend-hue { + background-blend-mode: hue; + } + + .lg\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .lg\:bg-blend-color { + background-blend-mode: color; + } + + .lg\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143720,6 +143976,70 @@ video { mix-blend-mode: luminosity; } + .xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .xl\:bg-blend-color { + background-blend-mode: color; + } + + .xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -172349,6 +172669,70 @@ video { mix-blend-mode: luminosity; } + .\32xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .\32xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .\32xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .\32xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .\32xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .\32xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .\32xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .\32xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .\32xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .\32xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .\32xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .\32xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .\32xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .\32xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .\32xl\:bg-blend-color { + background-blend-mode: color; + } + + .\32xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 020525da6a04..8b3eb415f215 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -29205,6 +29205,70 @@ video { mix-blend-mode: luminosity !important; } +.bg-blend-normal { + background-blend-mode: normal !important; +} + +.bg-blend-multiply { + background-blend-mode: multiply !important; +} + +.bg-blend-screen { + background-blend-mode: screen !important; +} + +.bg-blend-overlay { + background-blend-mode: overlay !important; +} + +.bg-blend-darken { + background-blend-mode: darken !important; +} + +.bg-blend-lighten { + background-blend-mode: lighten !important; +} + +.bg-blend-color-dodge { + background-blend-mode: color-dodge !important; +} + +.bg-blend-color-burn { + background-blend-mode: color-burn !important; +} + +.bg-blend-hard-light { + background-blend-mode: hard-light !important; +} + +.bg-blend-soft-light { + background-blend-mode: soft-light !important; +} + +.bg-blend-difference { + background-blend-mode: difference !important; +} + +.bg-blend-exclusion { + background-blend-mode: exclusion !important; +} + +.bg-blend-hue { + background-blend-mode: hue !important; +} + +.bg-blend-saturation { + background-blend-mode: saturation !important; +} + +.bg-blend-color { + background-blend-mode: color !important; +} + +.bg-blend-luminosity { + background-blend-mode: luminosity !important; +} + .example { font-weight: 700; color: #ef4444; @@ -57833,6 +57897,70 @@ video { mix-blend-mode: luminosity !important; } + .sm\:bg-blend-normal { + background-blend-mode: normal !important; + } + + .sm\:bg-blend-multiply { + background-blend-mode: multiply !important; + } + + .sm\:bg-blend-screen { + background-blend-mode: screen !important; + } + + .sm\:bg-blend-overlay { + background-blend-mode: overlay !important; + } + + .sm\:bg-blend-darken { + background-blend-mode: darken !important; + } + + .sm\:bg-blend-lighten { + background-blend-mode: lighten !important; + } + + .sm\:bg-blend-color-dodge { + background-blend-mode: color-dodge !important; + } + + .sm\:bg-blend-color-burn { + background-blend-mode: color-burn !important; + } + + .sm\:bg-blend-hard-light { + background-blend-mode: hard-light !important; + } + + .sm\:bg-blend-soft-light { + background-blend-mode: soft-light !important; + } + + .sm\:bg-blend-difference { + background-blend-mode: difference !important; + } + + .sm\:bg-blend-exclusion { + background-blend-mode: exclusion !important; + } + + .sm\:bg-blend-hue { + background-blend-mode: hue !important; + } + + .sm\:bg-blend-saturation { + background-blend-mode: saturation !important; + } + + .sm\:bg-blend-color { + background-blend-mode: color !important; + } + + .sm\:bg-blend-luminosity { + background-blend-mode: luminosity !important; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86462,6 +86590,70 @@ video { mix-blend-mode: luminosity !important; } + .md\:bg-blend-normal { + background-blend-mode: normal !important; + } + + .md\:bg-blend-multiply { + background-blend-mode: multiply !important; + } + + .md\:bg-blend-screen { + background-blend-mode: screen !important; + } + + .md\:bg-blend-overlay { + background-blend-mode: overlay !important; + } + + .md\:bg-blend-darken { + background-blend-mode: darken !important; + } + + .md\:bg-blend-lighten { + background-blend-mode: lighten !important; + } + + .md\:bg-blend-color-dodge { + background-blend-mode: color-dodge !important; + } + + .md\:bg-blend-color-burn { + background-blend-mode: color-burn !important; + } + + .md\:bg-blend-hard-light { + background-blend-mode: hard-light !important; + } + + .md\:bg-blend-soft-light { + background-blend-mode: soft-light !important; + } + + .md\:bg-blend-difference { + background-blend-mode: difference !important; + } + + .md\:bg-blend-exclusion { + background-blend-mode: exclusion !important; + } + + .md\:bg-blend-hue { + background-blend-mode: hue !important; + } + + .md\:bg-blend-saturation { + background-blend-mode: saturation !important; + } + + .md\:bg-blend-color { + background-blend-mode: color !important; + } + + .md\:bg-blend-luminosity { + background-blend-mode: luminosity !important; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -115091,6 +115283,70 @@ video { mix-blend-mode: luminosity !important; } + .lg\:bg-blend-normal { + background-blend-mode: normal !important; + } + + .lg\:bg-blend-multiply { + background-blend-mode: multiply !important; + } + + .lg\:bg-blend-screen { + background-blend-mode: screen !important; + } + + .lg\:bg-blend-overlay { + background-blend-mode: overlay !important; + } + + .lg\:bg-blend-darken { + background-blend-mode: darken !important; + } + + .lg\:bg-blend-lighten { + background-blend-mode: lighten !important; + } + + .lg\:bg-blend-color-dodge { + background-blend-mode: color-dodge !important; + } + + .lg\:bg-blend-color-burn { + background-blend-mode: color-burn !important; + } + + .lg\:bg-blend-hard-light { + background-blend-mode: hard-light !important; + } + + .lg\:bg-blend-soft-light { + background-blend-mode: soft-light !important; + } + + .lg\:bg-blend-difference { + background-blend-mode: difference !important; + } + + .lg\:bg-blend-exclusion { + background-blend-mode: exclusion !important; + } + + .lg\:bg-blend-hue { + background-blend-mode: hue !important; + } + + .lg\:bg-blend-saturation { + background-blend-mode: saturation !important; + } + + .lg\:bg-blend-color { + background-blend-mode: color !important; + } + + .lg\:bg-blend-luminosity { + background-blend-mode: luminosity !important; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143720,6 +143976,70 @@ video { mix-blend-mode: luminosity !important; } + .xl\:bg-blend-normal { + background-blend-mode: normal !important; + } + + .xl\:bg-blend-multiply { + background-blend-mode: multiply !important; + } + + .xl\:bg-blend-screen { + background-blend-mode: screen !important; + } + + .xl\:bg-blend-overlay { + background-blend-mode: overlay !important; + } + + .xl\:bg-blend-darken { + background-blend-mode: darken !important; + } + + .xl\:bg-blend-lighten { + background-blend-mode: lighten !important; + } + + .xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge !important; + } + + .xl\:bg-blend-color-burn { + background-blend-mode: color-burn !important; + } + + .xl\:bg-blend-hard-light { + background-blend-mode: hard-light !important; + } + + .xl\:bg-blend-soft-light { + background-blend-mode: soft-light !important; + } + + .xl\:bg-blend-difference { + background-blend-mode: difference !important; + } + + .xl\:bg-blend-exclusion { + background-blend-mode: exclusion !important; + } + + .xl\:bg-blend-hue { + background-blend-mode: hue !important; + } + + .xl\:bg-blend-saturation { + background-blend-mode: saturation !important; + } + + .xl\:bg-blend-color { + background-blend-mode: color !important; + } + + .xl\:bg-blend-luminosity { + background-blend-mode: luminosity !important; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -172349,6 +172669,70 @@ video { mix-blend-mode: luminosity !important; } + .\32xl\:bg-blend-normal { + background-blend-mode: normal !important; + } + + .\32xl\:bg-blend-multiply { + background-blend-mode: multiply !important; + } + + .\32xl\:bg-blend-screen { + background-blend-mode: screen !important; + } + + .\32xl\:bg-blend-overlay { + background-blend-mode: overlay !important; + } + + .\32xl\:bg-blend-darken { + background-blend-mode: darken !important; + } + + .\32xl\:bg-blend-lighten { + background-blend-mode: lighten !important; + } + + .\32xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge !important; + } + + .\32xl\:bg-blend-color-burn { + background-blend-mode: color-burn !important; + } + + .\32xl\:bg-blend-hard-light { + background-blend-mode: hard-light !important; + } + + .\32xl\:bg-blend-soft-light { + background-blend-mode: soft-light !important; + } + + .\32xl\:bg-blend-difference { + background-blend-mode: difference !important; + } + + .\32xl\:bg-blend-exclusion { + background-blend-mode: exclusion !important; + } + + .\32xl\:bg-blend-hue { + background-blend-mode: hue !important; + } + + .\32xl\:bg-blend-saturation { + background-blend-mode: saturation !important; + } + + .\32xl\:bg-blend-color { + background-blend-mode: color !important; + } + + .\32xl\:bg-blend-luminosity { + background-blend-mode: luminosity !important; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index a17aa0fefefd..bee78bc71a36 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -26649,6 +26649,70 @@ video { 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; +} + .example { font-weight: 700; color: #ef4444; @@ -52721,6 +52785,70 @@ video { mix-blend-mode: luminosity; } + .sm\:bg-blend-normal { + background-blend-mode: normal; + } + + .sm\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .sm\:bg-blend-screen { + background-blend-mode: screen; + } + + .sm\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .sm\:bg-blend-darken { + background-blend-mode: darken; + } + + .sm\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .sm\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .sm\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .sm\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .sm\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .sm\:bg-blend-difference { + background-blend-mode: difference; + } + + .sm\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .sm\:bg-blend-hue { + background-blend-mode: hue; + } + + .sm\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .sm\:bg-blend-color { + background-blend-mode: color; + } + + .sm\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -78794,6 +78922,70 @@ video { mix-blend-mode: luminosity; } + .md\:bg-blend-normal { + background-blend-mode: normal; + } + + .md\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .md\:bg-blend-screen { + background-blend-mode: screen; + } + + .md\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .md\:bg-blend-darken { + background-blend-mode: darken; + } + + .md\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .md\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .md\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .md\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .md\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .md\:bg-blend-difference { + background-blend-mode: difference; + } + + .md\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .md\:bg-blend-hue { + background-blend-mode: hue; + } + + .md\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .md\:bg-blend-color { + background-blend-mode: color; + } + + .md\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -104867,6 +105059,70 @@ video { mix-blend-mode: luminosity; } + .lg\:bg-blend-normal { + background-blend-mode: normal; + } + + .lg\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .lg\:bg-blend-screen { + background-blend-mode: screen; + } + + .lg\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .lg\:bg-blend-darken { + background-blend-mode: darken; + } + + .lg\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .lg\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .lg\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .lg\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .lg\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .lg\:bg-blend-difference { + background-blend-mode: difference; + } + + .lg\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .lg\:bg-blend-hue { + background-blend-mode: hue; + } + + .lg\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .lg\:bg-blend-color { + background-blend-mode: color; + } + + .lg\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -130940,6 +131196,70 @@ video { mix-blend-mode: luminosity; } + .xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .xl\:bg-blend-color { + background-blend-mode: color; + } + + .xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -157013,6 +157333,70 @@ video { mix-blend-mode: luminosity; } + .\32xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .\32xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .\32xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .\32xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .\32xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .\32xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .\32xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .\32xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .\32xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .\32xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .\32xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .\32xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .\32xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .\32xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .\32xl\:bg-blend-color { + background-blend-mode: color; + } + + .\32xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 92046957b2aa..b323f0cc0951 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -29205,6 +29205,70 @@ video { 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; +} + .example { font-weight: 700; color: #ef4444; @@ -57833,6 +57897,70 @@ video { mix-blend-mode: luminosity; } + .sm\:bg-blend-normal { + background-blend-mode: normal; + } + + .sm\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .sm\:bg-blend-screen { + background-blend-mode: screen; + } + + .sm\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .sm\:bg-blend-darken { + background-blend-mode: darken; + } + + .sm\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .sm\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .sm\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .sm\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .sm\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .sm\:bg-blend-difference { + background-blend-mode: difference; + } + + .sm\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .sm\:bg-blend-hue { + background-blend-mode: hue; + } + + .sm\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .sm\:bg-blend-color { + background-blend-mode: color; + } + + .sm\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .sm\:example { font-weight: 700; color: #ef4444; @@ -86462,6 +86590,70 @@ video { mix-blend-mode: luminosity; } + .md\:bg-blend-normal { + background-blend-mode: normal; + } + + .md\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .md\:bg-blend-screen { + background-blend-mode: screen; + } + + .md\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .md\:bg-blend-darken { + background-blend-mode: darken; + } + + .md\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .md\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .md\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .md\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .md\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .md\:bg-blend-difference { + background-blend-mode: difference; + } + + .md\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .md\:bg-blend-hue { + background-blend-mode: hue; + } + + .md\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .md\:bg-blend-color { + background-blend-mode: color; + } + + .md\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .md\:example { font-weight: 700; color: #ef4444; @@ -115091,6 +115283,70 @@ video { mix-blend-mode: luminosity; } + .lg\:bg-blend-normal { + background-blend-mode: normal; + } + + .lg\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .lg\:bg-blend-screen { + background-blend-mode: screen; + } + + .lg\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .lg\:bg-blend-darken { + background-blend-mode: darken; + } + + .lg\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .lg\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .lg\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .lg\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .lg\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .lg\:bg-blend-difference { + background-blend-mode: difference; + } + + .lg\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .lg\:bg-blend-hue { + background-blend-mode: hue; + } + + .lg\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .lg\:bg-blend-color { + background-blend-mode: color; + } + + .lg\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .lg\:example { font-weight: 700; color: #ef4444; @@ -143720,6 +143976,70 @@ video { mix-blend-mode: luminosity; } + .xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .xl\:bg-blend-color { + background-blend-mode: color; + } + + .xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .xl\:example { font-weight: 700; color: #ef4444; @@ -172349,6 +172669,70 @@ video { mix-blend-mode: luminosity; } + .\32xl\:bg-blend-normal { + background-blend-mode: normal; + } + + .\32xl\:bg-blend-multiply { + background-blend-mode: multiply; + } + + .\32xl\:bg-blend-screen { + background-blend-mode: screen; + } + + .\32xl\:bg-blend-overlay { + background-blend-mode: overlay; + } + + .\32xl\:bg-blend-darken { + background-blend-mode: darken; + } + + .\32xl\:bg-blend-lighten { + background-blend-mode: lighten; + } + + .\32xl\:bg-blend-color-dodge { + background-blend-mode: color-dodge; + } + + .\32xl\:bg-blend-color-burn { + background-blend-mode: color-burn; + } + + .\32xl\:bg-blend-hard-light { + background-blend-mode: hard-light; + } + + .\32xl\:bg-blend-soft-light { + background-blend-mode: soft-light; + } + + .\32xl\:bg-blend-difference { + background-blend-mode: difference; + } + + .\32xl\:bg-blend-exclusion { + background-blend-mode: exclusion; + } + + .\32xl\:bg-blend-hue { + background-blend-mode: hue; + } + + .\32xl\:bg-blend-saturation { + background-blend-mode: saturation; + } + + .\32xl\:bg-blend-color { + background-blend-mode: color; + } + + .\32xl\:bg-blend-luminosity { + background-blend-mode: luminosity; + } + .\32xl\:example { font-weight: 700; color: #ef4444; diff --git a/jit/corePlugins/backgroundBlendMode.js b/jit/corePlugins/backgroundBlendMode.js new file mode 100644 index 000000000000..45dd9a17a5d0 --- /dev/null +++ b/jit/corePlugins/backgroundBlendMode.js @@ -0,0 +1 @@ +module.exports = require('../../lib/plugins/backgroundBlendMode').default() diff --git a/jit/corePlugins/index.js b/jit/corePlugins/index.js index fb9c6f80de6f..bf42e58cbb93 100644 --- a/jit/corePlugins/index.js +++ b/jit/corePlugins/index.js @@ -282,6 +282,7 @@ module.exports = { placeholderOpacity: require('./placeholderOpacity'), opacity: require('./opacity'), + backgroundBlendMode: require('./backgroundBlendMode'), mixBlendMode: require('./mixBlendMode'), boxShadow: require('./boxShadow'), outline: require('./outline'), diff --git a/jit/tests/basic-usage.test.css b/jit/tests/basic-usage.test.css index 4aad5747ed93..55290da147d3 100644 --- a/jit/tests/basic-usage.test.css +++ b/jit/tests/basic-usage.test.css @@ -576,6 +576,12 @@ .opacity-90 { opacity: 0.9; } +.bg-blend-darken { + background-blend-mode: darken; +} +.bg-blend-difference { + background-blend-mode: difference; +} .mix-blend-multiply { mix-blend-mode: multiply; } diff --git a/jit/tests/basic-usage.test.html b/jit/tests/basic-usage.test.html index 24dea24d9d18..3ae49117afd7 100644 --- a/jit/tests/basic-usage.test.html +++ b/jit/tests/basic-usage.test.html @@ -88,6 +88,7 @@
+
diff --git a/src/corePluginList.js b/src/corePluginList.js index b52ee346bfea..9f6538d40d70 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -121,4 +121,5 @@ export const corePluginList = [ 'transitionDelay', 'animation', 'mixBlendMode', + 'backgroundBlendMode', ] diff --git a/src/plugins/backgroundBlendMode.js b/src/plugins/backgroundBlendMode.js new file mode 100644 index 000000000000..351e4961578f --- /dev/null +++ b/src/plugins/backgroundBlendMode.js @@ -0,0 +1,25 @@ +export default function () { + return function ({ addUtilities, variants }) { + addUtilities( + { + '.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' }, + }, + variants('backgroundBlendMode') + ) + } +} diff --git a/src/plugins/index.js b/src/plugins/index.js index ffb6bd4ed5ae..ff11ad996964 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -5,6 +5,7 @@ export { default as alignSelf } from './alignSelf' export { default as animation } from './animation' export { default as appearance } from './appearance' export { default as backgroundAttachment } from './backgroundAttachment' +export { default as backgroundBlendMode } from './backgroundBlendMode' export { default as backgroundClip } from './backgroundClip' export { default as backgroundColor } from './backgroundColor' export { default as backgroundImage } from './backgroundImage' diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index dd3ac35d3976..b029353a3b14 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -740,6 +740,7 @@ module.exports = { animation: ['responsive'], appearance: ['responsive'], backgroundAttachment: ['responsive'], + backgroundBlendMode: ['responsive'], backgroundClip: ['responsive'], backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'], backgroundImage: ['responsive'],