From 1cb060d34ecb6860e7a78a9cd0b910128957c5f0 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 4 Apr 2021 06:50:05 -0400
Subject: [PATCH] Add `mix-blend-mode` and `background-blend-mode` utilities
 (#3920)

* Add mix-blend-mode utilities

* Rename mix-blend-mode utilities to `mix-blend-*`

Co-Authored-By: Peter Neupauer <peter@neupauer.sk>

* Add `background-blend-mode` utilities

Co-Authored-By: Peter Neupauer <peter@neupauer.sk>

Co-authored-by: Peter Neupauer <peter@neupauer.sk>
---
 .../fixtures/tailwind-output-flagged.css      | 768 ++++++++++++++++++
 .../fixtures/tailwind-output-important.css    | 768 ++++++++++++++++++
 .../tailwind-output-no-color-opacity.css      | 768 ++++++++++++++++++
 __tests__/fixtures/tailwind-output.css        | 768 ++++++++++++++++++
 jit/corePlugins/backgroundBlendMode.js        |   1 +
 jit/corePlugins/index.js                      |   2 +
 jit/corePlugins/mixBlendMode.js               |   1 +
 jit/tests/basic-usage.test.css                |  12 +
 jit/tests/basic-usage.test.html               |   2 +
 src/corePluginList.js                         |   2 +
 src/plugins/backgroundBlendMode.js            |  25 +
 src/plugins/index.js                          |   2 +
 src/plugins/mixBlendMode.js                   |  25 +
 stubs/defaultConfig.stub.js                   |   2 +
 14 files changed, 3146 insertions(+)
 create mode 100644 jit/corePlugins/backgroundBlendMode.js
 create mode 100644 jit/corePlugins/mixBlendMode.js
 create mode 100644 src/plugins/backgroundBlendMode.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..b323f0cc0951 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -29141,6 +29141,134 @@ video {
   animation: bounce 1s infinite;
 }
 
+.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;
+}
+
+.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;
@@ -57705,6 +57833,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .sm\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .sm\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .sm\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .sm\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .sm\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .sm\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .sm\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .sm\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .sm\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .sm\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .sm\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .sm\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .sm\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .sm\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .sm\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .sm\:mix-blend-luminosity {
+    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;
@@ -86270,6 +86526,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .md\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .md\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .md\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .md\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .md\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .md\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .md\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .md\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .md\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .md\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .md\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .md\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .md\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .md\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .md\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .md\:mix-blend-luminosity {
+    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;
@@ -114835,6 +115219,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .lg\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .lg\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .lg\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .lg\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .lg\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .lg\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .lg\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .lg\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .lg\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .lg\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .lg\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .lg\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .lg\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .lg\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .lg\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .lg\:mix-blend-luminosity {
+    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;
@@ -143400,6 +143912,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .xl\:mix-blend-luminosity {
+    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;
@@ -171965,6 +172605,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .\32xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .\32xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .\32xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .\32xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .\32xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .\32xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .\32xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .\32xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .\32xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .\32xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .\32xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .\32xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .\32xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .\32xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .\32xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .\32xl\:mix-blend-luminosity {
+    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 46e893448edd..8b3eb415f215 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -29141,6 +29141,134 @@ video {
   animation: bounce 1s infinite !important;
 }
 
+.mix-blend-normal {
+  mix-blend-mode: normal !important;
+}
+
+.mix-blend-multiply {
+  mix-blend-mode: multiply !important;
+}
+
+.mix-blend-screen {
+  mix-blend-mode: screen !important;
+}
+
+.mix-blend-overlay {
+  mix-blend-mode: overlay !important;
+}
+
+.mix-blend-darken {
+  mix-blend-mode: darken !important;
+}
+
+.mix-blend-lighten {
+  mix-blend-mode: lighten !important;
+}
+
+.mix-blend-color-dodge {
+  mix-blend-mode: color-dodge !important;
+}
+
+.mix-blend-color-burn {
+  mix-blend-mode: color-burn !important;
+}
+
+.mix-blend-hard-light {
+  mix-blend-mode: hard-light !important;
+}
+
+.mix-blend-soft-light {
+  mix-blend-mode: soft-light !important;
+}
+
+.mix-blend-difference {
+  mix-blend-mode: difference !important;
+}
+
+.mix-blend-exclusion {
+  mix-blend-mode: exclusion !important;
+}
+
+.mix-blend-hue {
+  mix-blend-mode: hue !important;
+}
+
+.mix-blend-saturation {
+  mix-blend-mode: saturation !important;
+}
+
+.mix-blend-color {
+  mix-blend-mode: color !important;
+}
+
+.mix-blend-luminosity {
+  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;
@@ -57705,6 +57833,134 @@ video {
     animation: bounce 1s infinite !important;
   }
 
+  .sm\:mix-blend-normal {
+    mix-blend-mode: normal !important;
+  }
+
+  .sm\:mix-blend-multiply {
+    mix-blend-mode: multiply !important;
+  }
+
+  .sm\:mix-blend-screen {
+    mix-blend-mode: screen !important;
+  }
+
+  .sm\:mix-blend-overlay {
+    mix-blend-mode: overlay !important;
+  }
+
+  .sm\:mix-blend-darken {
+    mix-blend-mode: darken !important;
+  }
+
+  .sm\:mix-blend-lighten {
+    mix-blend-mode: lighten !important;
+  }
+
+  .sm\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge !important;
+  }
+
+  .sm\:mix-blend-color-burn {
+    mix-blend-mode: color-burn !important;
+  }
+
+  .sm\:mix-blend-hard-light {
+    mix-blend-mode: hard-light !important;
+  }
+
+  .sm\:mix-blend-soft-light {
+    mix-blend-mode: soft-light !important;
+  }
+
+  .sm\:mix-blend-difference {
+    mix-blend-mode: difference !important;
+  }
+
+  .sm\:mix-blend-exclusion {
+    mix-blend-mode: exclusion !important;
+  }
+
+  .sm\:mix-blend-hue {
+    mix-blend-mode: hue !important;
+  }
+
+  .sm\:mix-blend-saturation {
+    mix-blend-mode: saturation !important;
+  }
+
+  .sm\:mix-blend-color {
+    mix-blend-mode: color !important;
+  }
+
+  .sm\:mix-blend-luminosity {
+    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;
@@ -86270,6 +86526,134 @@ video {
     animation: bounce 1s infinite !important;
   }
 
+  .md\:mix-blend-normal {
+    mix-blend-mode: normal !important;
+  }
+
+  .md\:mix-blend-multiply {
+    mix-blend-mode: multiply !important;
+  }
+
+  .md\:mix-blend-screen {
+    mix-blend-mode: screen !important;
+  }
+
+  .md\:mix-blend-overlay {
+    mix-blend-mode: overlay !important;
+  }
+
+  .md\:mix-blend-darken {
+    mix-blend-mode: darken !important;
+  }
+
+  .md\:mix-blend-lighten {
+    mix-blend-mode: lighten !important;
+  }
+
+  .md\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge !important;
+  }
+
+  .md\:mix-blend-color-burn {
+    mix-blend-mode: color-burn !important;
+  }
+
+  .md\:mix-blend-hard-light {
+    mix-blend-mode: hard-light !important;
+  }
+
+  .md\:mix-blend-soft-light {
+    mix-blend-mode: soft-light !important;
+  }
+
+  .md\:mix-blend-difference {
+    mix-blend-mode: difference !important;
+  }
+
+  .md\:mix-blend-exclusion {
+    mix-blend-mode: exclusion !important;
+  }
+
+  .md\:mix-blend-hue {
+    mix-blend-mode: hue !important;
+  }
+
+  .md\:mix-blend-saturation {
+    mix-blend-mode: saturation !important;
+  }
+
+  .md\:mix-blend-color {
+    mix-blend-mode: color !important;
+  }
+
+  .md\:mix-blend-luminosity {
+    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;
@@ -114835,6 +115219,134 @@ video {
     animation: bounce 1s infinite !important;
   }
 
+  .lg\:mix-blend-normal {
+    mix-blend-mode: normal !important;
+  }
+
+  .lg\:mix-blend-multiply {
+    mix-blend-mode: multiply !important;
+  }
+
+  .lg\:mix-blend-screen {
+    mix-blend-mode: screen !important;
+  }
+
+  .lg\:mix-blend-overlay {
+    mix-blend-mode: overlay !important;
+  }
+
+  .lg\:mix-blend-darken {
+    mix-blend-mode: darken !important;
+  }
+
+  .lg\:mix-blend-lighten {
+    mix-blend-mode: lighten !important;
+  }
+
+  .lg\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge !important;
+  }
+
+  .lg\:mix-blend-color-burn {
+    mix-blend-mode: color-burn !important;
+  }
+
+  .lg\:mix-blend-hard-light {
+    mix-blend-mode: hard-light !important;
+  }
+
+  .lg\:mix-blend-soft-light {
+    mix-blend-mode: soft-light !important;
+  }
+
+  .lg\:mix-blend-difference {
+    mix-blend-mode: difference !important;
+  }
+
+  .lg\:mix-blend-exclusion {
+    mix-blend-mode: exclusion !important;
+  }
+
+  .lg\:mix-blend-hue {
+    mix-blend-mode: hue !important;
+  }
+
+  .lg\:mix-blend-saturation {
+    mix-blend-mode: saturation !important;
+  }
+
+  .lg\:mix-blend-color {
+    mix-blend-mode: color !important;
+  }
+
+  .lg\:mix-blend-luminosity {
+    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;
@@ -143400,6 +143912,134 @@ video {
     animation: bounce 1s infinite !important;
   }
 
+  .xl\:mix-blend-normal {
+    mix-blend-mode: normal !important;
+  }
+
+  .xl\:mix-blend-multiply {
+    mix-blend-mode: multiply !important;
+  }
+
+  .xl\:mix-blend-screen {
+    mix-blend-mode: screen !important;
+  }
+
+  .xl\:mix-blend-overlay {
+    mix-blend-mode: overlay !important;
+  }
+
+  .xl\:mix-blend-darken {
+    mix-blend-mode: darken !important;
+  }
+
+  .xl\:mix-blend-lighten {
+    mix-blend-mode: lighten !important;
+  }
+
+  .xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge !important;
+  }
+
+  .xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn !important;
+  }
+
+  .xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light !important;
+  }
+
+  .xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light !important;
+  }
+
+  .xl\:mix-blend-difference {
+    mix-blend-mode: difference !important;
+  }
+
+  .xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion !important;
+  }
+
+  .xl\:mix-blend-hue {
+    mix-blend-mode: hue !important;
+  }
+
+  .xl\:mix-blend-saturation {
+    mix-blend-mode: saturation !important;
+  }
+
+  .xl\:mix-blend-color {
+    mix-blend-mode: color !important;
+  }
+
+  .xl\:mix-blend-luminosity {
+    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;
@@ -171965,6 +172605,134 @@ video {
     animation: bounce 1s infinite !important;
   }
 
+  .\32xl\:mix-blend-normal {
+    mix-blend-mode: normal !important;
+  }
+
+  .\32xl\:mix-blend-multiply {
+    mix-blend-mode: multiply !important;
+  }
+
+  .\32xl\:mix-blend-screen {
+    mix-blend-mode: screen !important;
+  }
+
+  .\32xl\:mix-blend-overlay {
+    mix-blend-mode: overlay !important;
+  }
+
+  .\32xl\:mix-blend-darken {
+    mix-blend-mode: darken !important;
+  }
+
+  .\32xl\:mix-blend-lighten {
+    mix-blend-mode: lighten !important;
+  }
+
+  .\32xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge !important;
+  }
+
+  .\32xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn !important;
+  }
+
+  .\32xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light !important;
+  }
+
+  .\32xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light !important;
+  }
+
+  .\32xl\:mix-blend-difference {
+    mix-blend-mode: difference !important;
+  }
+
+  .\32xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion !important;
+  }
+
+  .\32xl\:mix-blend-hue {
+    mix-blend-mode: hue !important;
+  }
+
+  .\32xl\:mix-blend-saturation {
+    mix-blend-mode: saturation !important;
+  }
+
+  .\32xl\:mix-blend-color {
+    mix-blend-mode: color !important;
+  }
+
+  .\32xl\:mix-blend-luminosity {
+    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 a04be9a314ed..bee78bc71a36 100644
--- a/__tests__/fixtures/tailwind-output-no-color-opacity.css
+++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -26585,6 +26585,134 @@ video {
   animation: bounce 1s infinite;
 }
 
+.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;
+}
+
+.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;
@@ -52593,6 +52721,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .sm\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .sm\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .sm\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .sm\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .sm\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .sm\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .sm\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .sm\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .sm\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .sm\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .sm\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .sm\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .sm\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .sm\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .sm\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .sm\:mix-blend-luminosity {
+    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;
@@ -78602,6 +78858,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .md\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .md\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .md\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .md\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .md\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .md\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .md\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .md\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .md\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .md\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .md\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .md\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .md\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .md\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .md\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .md\:mix-blend-luminosity {
+    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;
@@ -104611,6 +104995,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .lg\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .lg\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .lg\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .lg\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .lg\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .lg\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .lg\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .lg\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .lg\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .lg\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .lg\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .lg\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .lg\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .lg\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .lg\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .lg\:mix-blend-luminosity {
+    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;
@@ -130620,6 +131132,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .xl\:mix-blend-luminosity {
+    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;
@@ -156629,6 +157269,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .\32xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .\32xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .\32xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .\32xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .\32xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .\32xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .\32xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .\32xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .\32xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .\32xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .\32xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .\32xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .\32xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .\32xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .\32xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .\32xl\:mix-blend-luminosity {
+    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 604473b32b82..b323f0cc0951 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -29141,6 +29141,134 @@ video {
   animation: bounce 1s infinite;
 }
 
+.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;
+}
+
+.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;
@@ -57705,6 +57833,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .sm\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .sm\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .sm\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .sm\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .sm\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .sm\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .sm\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .sm\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .sm\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .sm\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .sm\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .sm\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .sm\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .sm\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .sm\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .sm\:mix-blend-luminosity {
+    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;
@@ -86270,6 +86526,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .md\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .md\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .md\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .md\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .md\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .md\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .md\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .md\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .md\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .md\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .md\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .md\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .md\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .md\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .md\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .md\:mix-blend-luminosity {
+    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;
@@ -114835,6 +115219,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .lg\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .lg\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .lg\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .lg\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .lg\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .lg\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .lg\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .lg\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .lg\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .lg\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .lg\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .lg\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .lg\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .lg\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .lg\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .lg\:mix-blend-luminosity {
+    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;
@@ -143400,6 +143912,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .xl\:mix-blend-luminosity {
+    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;
@@ -171965,6 +172605,134 @@ video {
     animation: bounce 1s infinite;
   }
 
+  .\32xl\:mix-blend-normal {
+    mix-blend-mode: normal;
+  }
+
+  .\32xl\:mix-blend-multiply {
+    mix-blend-mode: multiply;
+  }
+
+  .\32xl\:mix-blend-screen {
+    mix-blend-mode: screen;
+  }
+
+  .\32xl\:mix-blend-overlay {
+    mix-blend-mode: overlay;
+  }
+
+  .\32xl\:mix-blend-darken {
+    mix-blend-mode: darken;
+  }
+
+  .\32xl\:mix-blend-lighten {
+    mix-blend-mode: lighten;
+  }
+
+  .\32xl\:mix-blend-color-dodge {
+    mix-blend-mode: color-dodge;
+  }
+
+  .\32xl\:mix-blend-color-burn {
+    mix-blend-mode: color-burn;
+  }
+
+  .\32xl\:mix-blend-hard-light {
+    mix-blend-mode: hard-light;
+  }
+
+  .\32xl\:mix-blend-soft-light {
+    mix-blend-mode: soft-light;
+  }
+
+  .\32xl\:mix-blend-difference {
+    mix-blend-mode: difference;
+  }
+
+  .\32xl\:mix-blend-exclusion {
+    mix-blend-mode: exclusion;
+  }
+
+  .\32xl\:mix-blend-hue {
+    mix-blend-mode: hue;
+  }
+
+  .\32xl\:mix-blend-saturation {
+    mix-blend-mode: saturation;
+  }
+
+  .\32xl\:mix-blend-color {
+    mix-blend-mode: color;
+  }
+
+  .\32xl\:mix-blend-luminosity {
+    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 33bb94f2c9ee..bf42e58cbb93 100644
--- a/jit/corePlugins/index.js
+++ b/jit/corePlugins/index.js
@@ -282,6 +282,8 @@ module.exports = {
   placeholderOpacity: require('./placeholderOpacity'),
 
   opacity: require('./opacity'),
+  backgroundBlendMode: require('./backgroundBlendMode'),
+  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..55290da147d3 100644
--- a/jit/tests/basic-usage.test.css
+++ b/jit/tests/basic-usage.test.css
@@ -576,6 +576,18 @@
 .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;
+}
+.mix-blend-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..3ae49117afd7 100644
--- a/jit/tests/basic-usage.test.html
+++ b/jit/tests/basic-usage.test.html
@@ -88,6 +88,8 @@
     <div class="object-cover"></div>
     <div class="object-bottom"></div>
     <div class="opacity-90"></div>
+    <div class="bg-blend-darken bg-blend-difference"></div>
+    <div class="mix-blend-multiply mix-blend-saturation"></div>
     <div class="order-last order-2"></div>
     <div class="outline-none outline-black"></div>
     <div class="overflow-hidden"></div>
diff --git a/src/corePluginList.js b/src/corePluginList.js
index 07dd33ebbfae..9f6538d40d70 100644
--- a/src/corePluginList.js
+++ b/src/corePluginList.js
@@ -120,4 +120,6 @@ export const corePluginList = [
   'transitionDuration',
   '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 8844f40b5a0e..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'
@@ -70,6 +71,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..652ce0a2a850
--- /dev/null
+++ b/src/plugins/mixBlendMode.js
@@ -0,0 +1,25 @@
+export default function () {
+  return function ({ addUtilities, variants }) {
+    addUtilities(
+      {
+        '.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')
+    )
+  }
+}
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 40a4d82c8cfe..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'],
@@ -805,6 +806,7 @@ module.exports = {
     maxWidth: ['responsive'],
     minHeight: ['responsive'],
     minWidth: ['responsive'],
+    mixBlendMode: ['responsive'],
     objectFit: ['responsive'],
     objectPosition: ['responsive'],
     opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],