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 @@
+
+
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'],