From e934237f61f3a8ce5cfab588afd83308d2d6dfde Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 2 Apr 2025 18:11:08 +0200
Subject: [PATCH 1/7] =?UTF-8?q?Polyfill:=20Fall=20back=20to=20first=20colo?=
 =?UTF-8?q?r=20value=20when=20`color-mix(=E2=80=A6)`=20contains=20unresolv?=
 =?UTF-8?q?able=20`var(=E2=80=A6)`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/__snapshots__/index.test.ts.snap      |   8 +-
 .../src/__snapshots__/index.test.ts.snap      |   8 +-
 packages/tailwindcss/src/ast.ts               |  66 +++++---
 .../tailwindcss/src/compat/plugin-api.test.ts |  95 +++++++++--
 .../tailwindcss/src/css-functions.test.ts     |  77 ++++++++-
 packages/tailwindcss/src/index.test.ts        |  24 ++-
 packages/tailwindcss/src/utilities.test.ts    | 154 +++++++++++++++---
 7 files changed, 367 insertions(+), 65 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 3fb7d2c3335b..c8178f7df6f0 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -173,7 +173,13 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
     ::placeholder {
-      color: color-mix(in oklab, currentcolor 50%, transparent);
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
   }
 
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 05d26ff6e5d8..e8159b0f606e 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -287,7 +287,13 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
 
   @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
     ::placeholder {
-      color: color-mix(in oklab, currentcolor 50%, transparent);
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
   }
 
diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index b982030a2b05..ac671c03ceaa 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -328,46 +328,64 @@ export function optimizeAst(
       if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) {
         let ast = ValueParser.parse(node.value)
 
-        let didGenerateFallback = false
-        ValueParser.walk(ast, (node) => {
+        ValueParser.walk(ast, (node, { replaceWith }) => {
           if (node.kind !== 'function' || node.value !== 'color-mix') return
 
+          let containsUnresolvableVars = false
+          let containsCurrentcolor = false
+          let didInlineVars = false
           ValueParser.walk(node.nodes, (node, { replaceWith }) => {
+            if (node.kind == 'word' && node.value.toLowerCase() === 'currentcolor') {
+              containsCurrentcolor = true
+              return
+            }
             if (node.kind !== 'function' || node.value !== 'var') return
             let firstChild = node.nodes[0]
             if (!firstChild || firstChild.kind !== 'word') return
 
             let inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any])
-            if (!inlinedColor) return
+            if (!inlinedColor) {
+              containsUnresolvableVars = true
+              return
+            }
 
-            didGenerateFallback = true
             replaceWith({ kind: 'word', value: inlinedColor })
+            didInlineVars = true
           })
 
-          // Change the colorspace to `srgb` since the fallback values should not be represented as
-          // `oklab(…)` functions again as their support in Safari <16 is very limited.
-          let colorspace = node.nodes[2]
-          if (
-            colorspace.kind === 'word' &&
-            (colorspace.value === 'oklab' ||
-              colorspace.value === 'oklch' ||
-              colorspace.value === 'lab' ||
-              colorspace.value === 'lch')
-          ) {
-            colorspace.value = 'srgb'
+          if (containsUnresolvableVars || containsCurrentcolor) {
+            let separatorIndex = node.nodes.findIndex(
+              (node) => node.kind === 'separator' && node.value.trim().includes(','),
+            )
+            if (separatorIndex === -1) return
+            let firstColorValue =
+              node.nodes.length > separatorIndex ? node.nodes[separatorIndex + 1] : null
+            if (!firstColorValue) return
+            replaceWith(firstColorValue)
+          } else if (didInlineVars) {
+            // Change the colorspace to `srgb` since the fallback values should not be represented as
+            // `oklab(…)` functions again as their support in Safari <16 is very limited.
+            let colorspace = node.nodes[2]
+            if (
+              colorspace.kind === 'word' &&
+              (colorspace.value === 'oklab' ||
+                colorspace.value === 'oklch' ||
+                colorspace.value === 'lab' ||
+                colorspace.value === 'lch')
+            ) {
+              colorspace.value = 'srgb'
+            }
           }
         })
 
-        if (didGenerateFallback) {
-          let fallback = {
-            ...node,
-            value: ValueParser.toCss(ast),
-          }
-          let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
-
-          parent.push(fallback, colorMixQuery)
-          return
+        let fallback = {
+          ...node,
+          value: ValueParser.toCss(ast),
         }
+        let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
+
+        parent.push(fallback, colorMixQuery)
+        return
       }
 
       parent.push(node)
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 8539b4fcc8ea..269a9d8004bf 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -286,12 +286,21 @@ describe('theme', async () => {
     expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
       ".fraction {
         color: color-mix(in oklab, #ef4444 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, #ef4444 50%, transparent);
+        }
       }
       .percentage {
         color: color-mix(in oklab, #ef4444 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, #ef4444 50%, transparent);
+        }
       }
       .variable {
-        color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
+        color: #ef4444;
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, #ef4444 var(--opacity), transparent);
+        }
       }
       "
     `)
@@ -360,21 +369,39 @@ describe('theme', async () => {
     ).toMatchInlineSnapshot(`
       ".css-fraction {
         color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        }
       }
       .css-percentage {
         color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
+        }
       }
       .css-variable {
-        color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+        color: rgba(255 0 0 / <alpha-value>);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) var(--opacity), transparent);
+        }
       }
       .js-fraction {
         color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
+        }
       }
       .js-percentage {
         color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
+        }
       }
       .js-variable {
-        color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
+        color: rgb(255 0 0 / 1);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, rgb(255 0 0 / 1) var(--opacity), transparent);
+        }
       }
       "
     `)
@@ -3582,6 +3609,12 @@ describe('matchUtilities()', () => {
           scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
         }
 
+        @supports (color: color-mix(in lab, red, red)) {
+          .scrollbar-\\[\\#08c\\]\\/50 {
+            scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
+          }
+        }
+
         .scrollbar-\\[2px\\] {
           scrollbar-width: 2px;
         }"
@@ -3745,28 +3778,38 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
       }
 
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-\\[\\#fff\\]\\/50 {
+          scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
+        }
+      }
+
       .scrollbar-\\[2px\\] {
         scrollbar-width: 2px;
       }
 
-      .scrollbar-\\[color\\:var\\(--my-color\\)\\] {
+      .scrollbar-\\[color\\:var\\(--my-color\\)\\], .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }
 
-      .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+          scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        }
       }
 
       .scrollbar-\\[length\\:var\\(--my-width\\)\\] {
         scrollbar-width: var(--my-width);
       }
 
-      .scrollbar-\\[var\\(--my-color\\)\\] {
+      .scrollbar-\\[var\\(--my-color\\)\\], .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
         scrollbar-color: var(--my-color);
       }
 
-      .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
-        scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-\\[var\\(--my-color\\)\\]\\/50 {
+          scrollbar-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        }
       }
 
       .scrollbar-black {
@@ -3775,6 +3818,12 @@ describe('matchUtilities()', () => {
 
       .scrollbar-black\\/50 {
         scrollbar-color: oklab(0% none none / .5);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-black\\/50 {
+          scrollbar-color: oklab(0% none none / .5);
+        }
       }"
     `)
 
@@ -3840,7 +3889,13 @@ describe('matchUtilities()', () => {
       ).trim(),
     ).toMatchInlineSnapshot(`
       ".scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
-        scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent);
+        scrollbar-color: var(--my-color);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-\\[var\\(--my-color\\)\\]\\/\\[25\\%\\] {
+          scrollbar-color: color-mix(in oklab, var(--my-color) 25%, transparent);
+        }
       }
 
       .scrollbar-black {
@@ -3851,16 +3906,30 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(0% none none / .33);
       }
 
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-black\\/33 {
+          scrollbar-color: oklab(0% none none / .33);
+        }
+      }
+
       .scrollbar-black\\/\\[50\\%\\] {
         scrollbar-color: oklab(0% none none / .5);
       }
 
-      .scrollbar-current {
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-black\\/\\[50\\%\\] {
+          scrollbar-color: oklab(0% none none / .5);
+        }
+      }
+
+      .scrollbar-current, .scrollbar-current\\/45 {
         scrollbar-color: currentcolor;
       }
 
-      .scrollbar-current\\/45 {
-        scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        .scrollbar-current\\/45 {
+          scrollbar-color: color-mix(in oklab, currentcolor 45%, transparent);
+        }
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 184a63806554..1b3a88201f9c 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -18,6 +18,12 @@ describe('--alpha(…)', () => {
     ).toMatchInlineSnapshot(`
       ".foo {
         margin: oklab(62.7955% .224 .125 / .5);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .foo {
+          margin: oklab(62.7955% .224 .125 / .5);
+        }
       }"
     `)
   })
@@ -220,6 +226,12 @@ describe('--theme(…)', () => {
     ).toMatchInlineSnapshot(`
       ".red {
         color: oklab(62.7955% .224863 .125846);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .red {
+          color: oklab(62.7955% .224863 .125846);
+        }
       }"
     `)
   })
@@ -552,6 +564,12 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .75);
+            }
           }"
         `)
       })
@@ -569,6 +587,12 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .75);
+            }
           }"
         `)
       })
@@ -586,6 +610,12 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .75);
+            }
           }"
         `)
       })
@@ -602,7 +632,13 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: color-mix(in oklab, red var(--opacity), transparent);
+            color: red;
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: color-mix(in oklab, red var(--opacity), transparent);
+            }
           }"
         `)
       })
@@ -620,7 +656,13 @@ describe('theme(…)', () => {
           `),
         ).toMatchInlineSnapshot(`
           ".red {
-            color: color-mix(in oklab, red var(--opacity, 50%), transparent);
+            color: red;
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: color-mix(in oklab, red var(--opacity, 50%), transparent);
+            }
           }"
         `)
       })
@@ -811,6 +853,12 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .25);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .25);
+            }
           }"
         `)
       })
@@ -881,8 +929,18 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ".red {
+          ":root, :host {
+            --color-foo: oklab(62.7955% .224 .125 / .5);
+          }
+
+          .red {
             color: oklab(62.7955% .224 .125 / .25);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .25);
+            }
           }"
         `)
       })
@@ -919,6 +977,12 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .5);
+          }
+
+          @supports (color: color-mix(in lab, red, red)) {
+            .red {
+              color: oklab(62.7955% .224 .125 / .5);
+            }
           }"
         `)
       })
@@ -1214,6 +1278,13 @@ describe('in plugins', () => {
           border-color: oklab(87% .069 .008 / .1);
           outline-color: oklab(79% .058 .159 / .15);
         }
+
+        @supports (color: color-mix(in lab, red, red)) {
+          .my-base-rule {
+            border-color: oklab(87% .069 .008 / .1);
+            outline-color: oklab(79% .058 .159 / .15);
+          }
+        }
       }
 
       @layer utilities {
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index 8c0e41c0fb64..d6e73ea1421e 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -247,6 +247,12 @@ describe('arbitrary properties', () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:red\\]\\/50 {
         color: oklab(62.7955% .224 .125 / .5);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .\\[color\\:red\\]\\/50 {
+          color: oklab(62.7955% .224 .125 / .5);
+        }
       }"
     `)
   })
@@ -258,7 +264,13 @@ describe('arbitrary properties', () => {
   it('should generate arbitrary properties with variables and with modifiers', async () => {
     expect(await run(['[color:var(--my-color)]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:var\\(--my-color\\)\\]\\/50 {
-        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        color: var(--my-color);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .\\[color\\:var\\(--my-color\\)\\]\\/50 {
+          color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        }
       }"
     `)
   })
@@ -4815,7 +4827,7 @@ describe('`color-mix(…)` polyfill', () => {
       }
 
       .stacked {
-        color: lch(55.5764% 89.7903 33.1932 / .25098);
+        color: lch(55.4814% 89.568 33.053 / .25);
       }
 
       @supports (color: color-mix(in lab, red, red)) {
@@ -4906,7 +4918,13 @@ describe('`color-mix(…)` polyfill', () => {
       ),
     ).resolves.toMatchInlineSnapshot(`
       ".text-current\\/50 {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
+        color: currentColor;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-current\\/50 {
+          color: color-mix(in oklab, currentcolor 50%, transparent);
+        }
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 5106c12594db..d0ac017de691 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -22906,7 +22906,7 @@ test('text-shadow', async () => {
   ).toEqual('')
 })
 
-test('shadow', async () => {
+test.only('shadow', async () => {
   expect(
     await compileCss(
       css`
@@ -22997,10 +22997,16 @@ test('shadow', async () => {
 
     .shadow-\\[10px_10px\\]\\/25 {
       --tw-shadow-alpha: 25%;
-      --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      --tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[10px_10px\\]\\/25 {
+        --tw-shadow: 10px 10px var(--tw-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      }
+    }
+
     .shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
       --tw-shadow-alpha: 25%;
       --tw-shadow: 12px 12px var(--tw-shadow-color, oklab(59.9824% -.067 -.124 / .25));
@@ -23049,35 +23055,137 @@ test('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\] {
-      --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: #08c;
     }
 
-    .shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[\\#0088cc\\] {
+        --tw-shadow-color: color-mix(in oklab, #08c var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[\\#0088cc\\]\\/50 {
+      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[\\#0088cc\\]\\/50 {
+        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+        --tw-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-\\[color\\:var\\(--value\\)\\] {
-      --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[color\\:var\\(--value\\)\\] {
+        --tw-shadow-color: color-mix(in oklab, var(--value) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+      --tw-shadow-color: var(--value);
     }
 
-    .shadow-\\[color\\:var\\(--value\\)\\]\\/50, .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+      --tw-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+      --tw-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-current {
-      --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-current {
+        --tw-shadow-color: color-mix(in oklab, currentcolor var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-current\\/50 {
+      --tw-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-current\\/50 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
-    .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
+    .shadow-current\\/\\[0\\.5\\] {
+      --tw-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-current\\/\\[0\\.5\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+
+    .shadow-current\\/\\[50\\%\\] {
+      --tw-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-current\\/\\[50\\%\\] {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-inherit {
-      --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: inherit;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-inherit {
+        --tw-shadow-color: color-mix(in oklab, inherit var(--tw-shadow-alpha), transparent);
+      }
     }
 
     .shadow-red-500 {
-      --tw-shadow-color: color-mix(in srgb, #ef4444 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: #ef4444;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23087,7 +23195,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.5 {
-      --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .025);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23097,7 +23205,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.25 {
-      --tw-shadow-color: color-mix(in srgb, #ef444406 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .0225);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23107,7 +23215,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.75 {
-      --tw-shadow-color: color-mix(in srgb, #ef444407 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .0275);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23117,7 +23225,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/50 {
-      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23127,7 +23235,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/\\[0\\.5\\] {
-      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23137,7 +23245,7 @@ test('shadow', async () => {
     }
 
     .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: color-mix(in srgb, #ef444480 var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23147,7 +23255,13 @@ test('shadow', async () => {
     }
 
     .shadow-transparent {
-      --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
+      --tw-shadow-color: transparent;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .shadow-transparent {
+        --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
+      }
     }
 
     @property --tw-shadow {

From 7843b33b2073ce53349cfcda5d3a356242e7b667 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 11:43:45 +0200
Subject: [PATCH 2/7] =?UTF-8?q?Add=20tests=20and=20do=20not=20polyfill=20i?=
 =?UTF-8?q?f=20`color-mix(=E2=80=A6)`=20only=20has=20static=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/tailwindcss/src/ast.ts               | 24 +++--
 .../tailwindcss/src/compat/plugin-api.test.ts | 48 ----------
 .../tailwindcss/src/css-functions.test.ts     | 61 +-----------
 packages/tailwindcss/src/index.test.ts        | 94 ++++++++++++++++---
 packages/tailwindcss/src/utilities.test.ts    | 18 ++--
 5 files changed, 106 insertions(+), 139 deletions(-)

diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index ac671c03ceaa..4c92f055efba 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -328,6 +328,7 @@ export function optimizeAst(
       if (polyfills & Polyfills.ColorMix && node.value.includes('color-mix(')) {
         let ast = ValueParser.parse(node.value)
 
+        let requiresPolyfill = false
         ValueParser.walk(ast, (node, { replaceWith }) => {
           if (node.kind !== 'function' || node.value !== 'color-mix') return
 
@@ -337,12 +338,15 @@ export function optimizeAst(
           ValueParser.walk(node.nodes, (node, { replaceWith }) => {
             if (node.kind == 'word' && node.value.toLowerCase() === 'currentcolor') {
               containsCurrentcolor = true
+              requiresPolyfill = true
               return
             }
             if (node.kind !== 'function' || node.value !== 'var') return
             let firstChild = node.nodes[0]
             if (!firstChild || firstChild.kind !== 'word') return
 
+            requiresPolyfill = true
+
             let inlinedColor = designSystem.theme.resolveValue(null, [firstChild.value as any])
             if (!inlinedColor) {
               containsUnresolvableVars = true
@@ -350,7 +354,6 @@ export function optimizeAst(
             }
 
             replaceWith({ kind: 'word', value: inlinedColor })
-            didInlineVars = true
           })
 
           if (containsUnresolvableVars || containsCurrentcolor) {
@@ -362,7 +365,7 @@ export function optimizeAst(
               node.nodes.length > separatorIndex ? node.nodes[separatorIndex + 1] : null
             if (!firstColorValue) return
             replaceWith(firstColorValue)
-          } else if (didInlineVars) {
+          } else if (requiresPolyfill) {
             // Change the colorspace to `srgb` since the fallback values should not be represented as
             // `oklab(…)` functions again as their support in Safari <16 is very limited.
             let colorspace = node.nodes[2]
@@ -378,14 +381,17 @@ export function optimizeAst(
           }
         })
 
-        let fallback = {
-          ...node,
-          value: ValueParser.toCss(ast),
-        }
-        let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
+        if (requiresPolyfill) {
+          let fallback = {
+            ...node,
+            value: ValueParser.toCss(ast),
+          }
+          let colorMixQuery = rule('@supports (color: color-mix(in lab, red, red))', [node])
 
-        parent.push(fallback, colorMixQuery)
-        return
+          parent.push(fallback, colorMixQuery)
+
+          return
+        }
       }
 
       parent.push(node)
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
index 269a9d8004bf..dc415eb1a8c2 100644
--- a/packages/tailwindcss/src/compat/plugin-api.test.ts
+++ b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -286,15 +286,9 @@ describe('theme', async () => {
     expect(compiler.build(['percentage', 'fraction', 'variable'])).toMatchInlineSnapshot(`
       ".fraction {
         color: color-mix(in oklab, #ef4444 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, #ef4444 50%, transparent);
-        }
       }
       .percentage {
         color: color-mix(in oklab, #ef4444 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, #ef4444 50%, transparent);
-        }
       }
       .variable {
         color: #ef4444;
@@ -369,15 +363,9 @@ describe('theme', async () => {
     ).toMatchInlineSnapshot(`
       ".css-fraction {
         color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-        }
       }
       .css-percentage {
         color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgba(255 0 0 / <alpha-value>) 50%, transparent);
-        }
       }
       .css-variable {
         color: rgba(255 0 0 / <alpha-value>);
@@ -387,15 +375,9 @@ describe('theme', async () => {
       }
       .js-fraction {
         color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
-        }
       }
       .js-percentage {
         color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, rgb(255 0 0 / 1) 50%, transparent);
-        }
       }
       .js-variable {
         color: rgb(255 0 0 / 1);
@@ -3609,12 +3591,6 @@ describe('matchUtilities()', () => {
           scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
         }
 
-        @supports (color: color-mix(in lab, red, red)) {
-          .scrollbar-\\[\\#08c\\]\\/50 {
-            scrollbar-color: oklab(59.9824% -.067 -.124 / .5);
-          }
-        }
-
         .scrollbar-\\[2px\\] {
           scrollbar-width: 2px;
         }"
@@ -3778,12 +3754,6 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
       }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-\\[\\#fff\\]\\/50 {
-          scrollbar-color: oklab(100% 0 5.96046e-8 / .5);
-        }
-      }
-
       .scrollbar-\\[2px\\] {
         scrollbar-width: 2px;
       }
@@ -3818,12 +3788,6 @@ describe('matchUtilities()', () => {
 
       .scrollbar-black\\/50 {
         scrollbar-color: oklab(0% none none / .5);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-black\\/50 {
-          scrollbar-color: oklab(0% none none / .5);
-        }
       }"
     `)
 
@@ -3906,22 +3870,10 @@ describe('matchUtilities()', () => {
         scrollbar-color: oklab(0% none none / .33);
       }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-black\\/33 {
-          scrollbar-color: oklab(0% none none / .33);
-        }
-      }
-
       .scrollbar-black\\/\\[50\\%\\] {
         scrollbar-color: oklab(0% none none / .5);
       }
 
-      @supports (color: color-mix(in lab, red, red)) {
-        .scrollbar-black\\/\\[50\\%\\] {
-          scrollbar-color: oklab(0% none none / .5);
-        }
-      }
-
       .scrollbar-current, .scrollbar-current\\/45 {
         scrollbar-color: currentcolor;
       }
diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts
index 1b3a88201f9c..37747e32f751 100644
--- a/packages/tailwindcss/src/css-functions.test.ts
+++ b/packages/tailwindcss/src/css-functions.test.ts
@@ -18,12 +18,6 @@ describe('--alpha(…)', () => {
     ).toMatchInlineSnapshot(`
       ".foo {
         margin: oklab(62.7955% .224 .125 / .5);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .foo {
-          margin: oklab(62.7955% .224 .125 / .5);
-        }
       }"
     `)
   })
@@ -226,12 +220,6 @@ describe('--theme(…)', () => {
     ).toMatchInlineSnapshot(`
       ".red {
         color: oklab(62.7955% .224863 .125846);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .red {
-          color: oklab(62.7955% .224863 .125846);
-        }
       }"
     `)
   })
@@ -564,12 +552,6 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .75);
-            }
           }"
         `)
       })
@@ -587,12 +569,6 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .75);
-            }
           }"
         `)
       })
@@ -610,12 +586,6 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .75);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .75);
-            }
           }"
         `)
       })
@@ -853,12 +823,6 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .25);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .25);
-            }
           }"
         `)
       })
@@ -929,18 +893,8 @@ describe('theme(…)', () => {
             }
           `),
         ).toMatchInlineSnapshot(`
-          ":root, :host {
-            --color-foo: oklab(62.7955% .224 .125 / .5);
-          }
-
-          .red {
+          ".red {
             color: oklab(62.7955% .224 .125 / .25);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .25);
-            }
           }"
         `)
       })
@@ -977,12 +931,6 @@ describe('theme(…)', () => {
         ).toMatchInlineSnapshot(`
           ".red {
             color: oklab(62.7955% .224 .125 / .5);
-          }
-
-          @supports (color: color-mix(in lab, red, red)) {
-            .red {
-              color: oklab(62.7955% .224 .125 / .5);
-            }
           }"
         `)
       })
@@ -1278,13 +1226,6 @@ describe('in plugins', () => {
           border-color: oklab(87% .069 .008 / .1);
           outline-color: oklab(79% .058 .159 / .15);
         }
-
-        @supports (color: color-mix(in lab, red, red)) {
-          .my-base-rule {
-            border-color: oklab(87% .069 .008 / .1);
-            outline-color: oklab(79% .058 .159 / .15);
-          }
-        }
       }
 
       @layer utilities {
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index d6e73ea1421e..b2bbd225220c 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -247,12 +247,6 @@ describe('arbitrary properties', () => {
     expect(await run(['[color:red]/50'])).toMatchInlineSnapshot(`
       ".\\[color\\:red\\]\\/50 {
         color: oklab(62.7955% .224 .125 / .5);
-      }
-
-      @supports (color: color-mix(in lab, red, red)) {
-        .\\[color\\:red\\]\\/50 {
-          color: oklab(62.7955% .224 .125 / .5);
-        }
       }"
     `)
   })
@@ -4827,7 +4821,7 @@ describe('`color-mix(…)` polyfill', () => {
       }
 
       .stacked {
-        color: lch(55.4814% 89.568 33.053 / .25);
+        color: lch(55.5764% 89.7903 33.1932 / .25098);
       }
 
       @supports (color: color-mix(in lab, red, red)) {
@@ -4908,27 +4902,101 @@ describe('`color-mix(…)` polyfill', () => {
     `)
   })
 
-  it('does not replace `currentcolor` inside `color-mix(…)`', async () => {
+  it('uses the first color value as the fallback when the `color-mix(…)` function contains non-theme variables', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+        `,
+        ['text-(--my-color)/50', 'text-red-500/(--my-opacity)', 'text-(--my-color)/(--my-opacity)'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: oklch(63.7% .237 25.331);
+      }
+
+      .text-\\(--my-color\\)\\/\\(--my-opacity\\) {
+        color: var(--my-color);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-\\(--my-color\\)\\/\\(--my-opacity\\) {
+          color: color-mix(in oklab, var(--my-color) var(--my-opacity), transparent);
+        }
+      }
+
+      .text-\\(--my-color\\)\\/50 {
+        color: var(--my-color);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-\\(--my-color\\)\\/50 {
+          color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        }
+      }
+
+      .text-red-500\\/\\(--my-opacity\\) {
+        color: oklch(63.7% .237 25.331);
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-red-500\\/\\(--my-opacity\\) {
+          color: color-mix(in oklab, var(--color-red-500) var(--my-opacity), transparent);
+        }
+      }"
+    `)
+  })
+
+  it('uses the first color value of the inner most `color-mix(…)` function as the fallback when nested `color-mix(…)` function all contain non-theme variables', async () => {
     await expect(
       compileCss(
         css`
           @tailwind utilities;
+          .stacked {
+            color: color-mix(
+              in oklab,
+              color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent)
+                var(--my-outer-opacity),
+              transparent
+            );
+          }
         `,
-        ['text-current/50'],
+        [],
       ),
     ).resolves.toMatchInlineSnapshot(`
-      ".text-current\\/50 {
-        color: currentColor;
+      ".stacked {
+        color: var(--my-color);
       }
 
       @supports (color: color-mix(in lab, red, red)) {
-        .text-current\\/50 {
-          color: color-mix(in oklab, currentcolor 50%, transparent);
+        .stacked {
+          color: color-mix(in oklab, color-mix(in oklab, var(--my-color) var(--my-inner-opacity), transparent) var(--my-outer-opacity), transparent);
         }
       }"
     `)
   })
 
+  it('does not create a fallback when all color values are statically analyzable (lightningcss will flatten this)', async () => {
+    await expect(
+      compileCss(
+        css`
+          @theme inline {
+            --color-red-500: oklch(63.7% 0.237 25.331);
+          }
+          @tailwind utilities;
+        `,
+        ['text-red-500/50'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ".text-red-500\\/50 {
+        color: oklab(63.7% .214 .101 / .5);
+      }"
+    `)
+  })
+
   it('also replaces eventual variables in opacity values', async () => {
     await expect(
       compileCss(
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index d0ac017de691..ae645ff1fbde 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -23065,7 +23065,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/50 {
-      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-shadow-color: #0088cc80;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23075,7 +23075,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
-      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-shadow-color: #0088cc80;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23085,7 +23085,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-shadow-color: oklab(59.9824% -.067 -.124 / .5);
+      --tw-shadow-color: #0088cc80;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23195,7 +23195,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.5 {
-      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .025);
+      --tw-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23205,7 +23205,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.25 {
-      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .0225);
+      --tw-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23215,7 +23215,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/2\\.75 {
-      --tw-shadow-color: oklab(63.6834% .187864 .0889286 / .0275);
+      --tw-shadow-color: #ef444407;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23225,7 +23225,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/50 {
-      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
+      --tw-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23235,7 +23235,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/\\[0\\.5\\] {
-      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
+      --tw-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23245,7 +23245,7 @@ test.only('shadow', async () => {
     }
 
     .shadow-red-500\\/\\[50\\%\\] {
-      --tw-shadow-color: oklab(63.6834% .187 .088 / .5);
+      --tw-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {

From df1d22b684efa5dd756e61ab4a67fb22206d04cf Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 11:58:43 +0200
Subject: [PATCH 3/7] Update snpashots

---
 integrations/cli/index.test.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index a42ac4292840..ab6db920c04a 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -1711,7 +1711,10 @@ test(
         }
         @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
           ::placeholder {
-            color: color-mix(in oklab, currentcolor 50%, transparent);
+            color: currentColor;
+            @supports (color: color-mix(in lab, red, red)) {
+              color: color-mix(in oklab, currentColor 50%, transparent);
+            }
           }
         }
         textarea {

From e93b1d0e57db73d000fded823a0ce67d0e928d33 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 12:08:51 +0200
Subject: [PATCH 4/7] Add currentcolor test

---
 .../src/__snapshots__/utilities.test.ts.snap  |  216 ++-
 packages/tailwindcss/src/index.test.ts        |   21 +
 packages/tailwindcss/src/utilities.test.ts    | 1494 ++++++++++++++---
 3 files changed, 1454 insertions(+), 277 deletions(-)

diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
index 4cb55a6f931d..3f5fd56b7811 100644
--- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -91,28 +91,34 @@ exports[`border-* 1`] = `
   border-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-\\[color\\:var\\(--my-color\\)\\] {
+.border-\\[color\\:var\\(--my-color\\)\\], .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-color: var(--my-color);
 }
 
-.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-\\[var\\(--my-color\\)\\] {
+.border-\\[var\\(--my-color\\)\\], .border-\\[var\\(--my-color\\)\\]\\/50 {
   border-color: var(--my-color);
 }
 
-.border-\\[var\\(--my-color\\)\\]\\/50 {
-  border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-\\[var\\(--my-color\\)\\]\\/50 {
+    border-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-current {
+.border-current, .border-current\\/50 {
   border-color: currentColor;
 }
 
-.border-current\\/50 {
-  border-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-current\\/50 {
+    border-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-inherit {
@@ -265,28 +271,34 @@ exports[`border-b-* 1`] = `
   border-bottom-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-b-\\[color\\:var\\(--my-color\\)\\] {
+.border-b-\\[color\\:var\\(--my-color\\)\\], .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-b-\\[var\\(--my-color\\)\\] {
+.border-b-\\[var\\(--my-color\\)\\], .border-b-\\[var\\(--my-color\\)\\]\\/50 {
   border-bottom-color: var(--my-color);
 }
 
-.border-b-\\[var\\(--my-color\\)\\]\\/50 {
-  border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-\\[var\\(--my-color\\)\\]\\/50 {
+    border-bottom-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-b-current {
+.border-b-current, .border-b-current\\/50 {
   border-bottom-color: currentColor;
 }
 
-.border-b-current\\/50 {
-  border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-b-current\\/50 {
+    border-bottom-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-b-inherit {
@@ -439,28 +451,34 @@ exports[`border-e-* 1`] = `
   border-inline-end-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-e-\\[color\\:var\\(--my-color\\)\\] {
+.border-e-\\[color\\:var\\(--my-color\\)\\], .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-e-\\[var\\(--my-color\\)\\] {
+.border-e-\\[var\\(--my-color\\)\\], .border-e-\\[var\\(--my-color\\)\\]\\/50 {
   border-inline-end-color: var(--my-color);
 }
 
-.border-e-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-\\[var\\(--my-color\\)\\]\\/50 {
+    border-inline-end-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-e-current {
+.border-e-current, .border-e-current\\/50 {
   border-inline-end-color: currentColor;
 }
 
-.border-e-current\\/50 {
-  border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-e-current\\/50 {
+    border-inline-end-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-e-inherit {
@@ -613,28 +631,34 @@ exports[`border-l-* 1`] = `
   border-left-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-l-\\[color\\:var\\(--my-color\\)\\] {
+.border-l-\\[color\\:var\\(--my-color\\)\\], .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-l-\\[var\\(--my-color\\)\\] {
+.border-l-\\[var\\(--my-color\\)\\], .border-l-\\[var\\(--my-color\\)\\]\\/50 {
   border-left-color: var(--my-color);
 }
 
-.border-l-\\[var\\(--my-color\\)\\]\\/50 {
-  border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-\\[var\\(--my-color\\)\\]\\/50 {
+    border-left-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-l-current {
+.border-l-current, .border-l-current\\/50 {
   border-left-color: currentColor;
 }
 
-.border-l-current\\/50 {
-  border-left-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-l-current\\/50 {
+    border-left-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-l-inherit {
@@ -787,28 +811,34 @@ exports[`border-r-* 1`] = `
   border-right-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-r-\\[color\\:var\\(--my-color\\)\\] {
+.border-r-\\[color\\:var\\(--my-color\\)\\], .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-r-\\[var\\(--my-color\\)\\] {
+.border-r-\\[var\\(--my-color\\)\\], .border-r-\\[var\\(--my-color\\)\\]\\/50 {
   border-right-color: var(--my-color);
 }
 
-.border-r-\\[var\\(--my-color\\)\\]\\/50 {
-  border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-\\[var\\(--my-color\\)\\]\\/50 {
+    border-right-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-r-current {
+.border-r-current, .border-r-current\\/50 {
   border-right-color: currentColor;
 }
 
-.border-r-current\\/50 {
-  border-right-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-r-current\\/50 {
+    border-right-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-r-inherit {
@@ -961,28 +991,34 @@ exports[`border-s-* 1`] = `
   border-inline-start-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-s-\\[color\\:var\\(--my-color\\)\\] {
+.border-s-\\[color\\:var\\(--my-color\\)\\], .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-s-\\[var\\(--my-color\\)\\] {
+.border-s-\\[var\\(--my-color\\)\\], .border-s-\\[var\\(--my-color\\)\\]\\/50 {
   border-inline-start-color: var(--my-color);
 }
 
-.border-s-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-\\[var\\(--my-color\\)\\]\\/50 {
+    border-inline-start-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-s-current {
+.border-s-current, .border-s-current\\/50 {
   border-inline-start-color: currentColor;
 }
 
-.border-s-current\\/50 {
-  border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-s-current\\/50 {
+    border-inline-start-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-s-inherit {
@@ -1135,28 +1171,34 @@ exports[`border-t-* 1`] = `
   border-top-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-t-\\[color\\:var\\(--my-color\\)\\] {
+.border-t-\\[color\\:var\\(--my-color\\)\\], .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-t-\\[var\\(--my-color\\)\\] {
+.border-t-\\[var\\(--my-color\\)\\], .border-t-\\[var\\(--my-color\\)\\]\\/50 {
   border-top-color: var(--my-color);
 }
 
-.border-t-\\[var\\(--my-color\\)\\]\\/50 {
-  border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-\\[var\\(--my-color\\)\\]\\/50 {
+    border-top-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-t-current {
+.border-t-current, .border-t-current\\/50 {
   border-top-color: currentColor;
 }
 
-.border-t-current\\/50 {
-  border-top-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-t-current\\/50 {
+    border-top-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-t-inherit {
@@ -1309,28 +1351,34 @@ exports[`border-x-* 1`] = `
   border-inline-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-x-\\[color\\:var\\(--my-color\\)\\] {
+.border-x-\\[color\\:var\\(--my-color\\)\\], .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-inline-color: var(--my-color);
 }
 
-.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-x-\\[var\\(--my-color\\)\\] {
+.border-x-\\[var\\(--my-color\\)\\], .border-x-\\[var\\(--my-color\\)\\]\\/50 {
   border-inline-color: var(--my-color);
 }
 
-.border-x-\\[var\\(--my-color\\)\\]\\/50 {
-  border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-\\[var\\(--my-color\\)\\]\\/50 {
+    border-inline-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-x-current {
+.border-x-current, .border-x-current\\/50 {
   border-inline-color: currentColor;
 }
 
-.border-x-current\\/50 {
-  border-inline-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-x-current\\/50 {
+    border-inline-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-x-inherit {
@@ -1483,28 +1531,34 @@ exports[`border-y-* 1`] = `
   border-block-color: oklab(59.9824% -.067 -.124 / .5);
 }
 
-.border-y-\\[color\\:var\\(--my-color\\)\\] {
+.border-y-\\[color\\:var\\(--my-color\\)\\], .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
   border-block-color: var(--my-color);
 }
 
-.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
-  border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+    border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-y-\\[var\\(--my-color\\)\\] {
+.border-y-\\[var\\(--my-color\\)\\], .border-y-\\[var\\(--my-color\\)\\]\\/50 {
   border-block-color: var(--my-color);
 }
 
-.border-y-\\[var\\(--my-color\\)\\]\\/50 {
-  border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-\\[var\\(--my-color\\)\\]\\/50 {
+    border-block-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+  }
 }
 
-.border-y-current {
+.border-y-current, .border-y-current\\/50 {
   border-block-color: currentColor;
 }
 
-.border-y-current\\/50 {
-  border-block-color: color-mix(in oklab, currentcolor 50%, transparent);
+@supports (color: color-mix(in lab, red, red)) {
+  .border-y-current\\/50 {
+    border-block-color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
 }
 
 .border-y-inherit {
diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts
index b2bbd225220c..14aaf18c7c67 100644
--- a/packages/tailwindcss/src/index.test.ts
+++ b/packages/tailwindcss/src/index.test.ts
@@ -4950,6 +4950,27 @@ describe('`color-mix(…)` polyfill', () => {
     `)
   })
 
+  it('uses the first color value as the fallback when the `color-mix(…)` function contains currentcolor', async () => {
+    await expect(
+      compileCss(
+        css`
+          @tailwind utilities;
+        `,
+        ['text-current/50'],
+      ),
+    ).resolves.toMatchInlineSnapshot(`
+      ".text-current\\/50 {
+        color: currentColor;
+      }
+
+      @supports (color: color-mix(in lab, red, red)) {
+        .text-current\\/50 {
+          color: color-mix(in oklab, currentcolor 50%, transparent);
+        }
+      }"
+    `)
+  })
+
   it('uses the first color value of the inner most `color-mix(…)` function as the fallback when nested `color-mix(…)` function all contain non-theme variables', async () => {
     await expect(
       compileCss(
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index ae645ff1fbde..6544129c4cf7 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -8447,12 +8447,34 @@ test('accent', async () => {
       accent-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .accent-current {
+    .accent-current, .accent-current\\/50 {
       accent-color: currentColor;
     }
 
-    .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
-      accent-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-current\\/50 {
+        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .accent-current\\/\\[0\\.5\\] {
+      accent-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-current\\/\\[0\\.5\\] {
+        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .accent-current\\/\\[50\\%\\] {
+      accent-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .accent-current\\/\\[50\\%\\] {
+        accent-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .accent-inherit {
@@ -8606,12 +8628,34 @@ test('caret', async () => {
       caret-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .caret-current {
+    .caret-current, .caret-current\\/50 {
       caret-color: currentColor;
     }
 
-    .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
-      caret-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-current\\/50 {
+        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .caret-current\\/\\[0\\.5\\] {
+      caret-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-current\\/\\[0\\.5\\] {
+        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .caret-current\\/\\[50\\%\\] {
+      caret-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .caret-current\\/\\[50\\%\\] {
+        caret-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .caret-inherit {
@@ -8763,12 +8807,34 @@ test('divide-color', async () => {
       border-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    :where(.divide-current > :not(:last-child)) {
+    :where(.divide-current > :not(:last-child)), :where(.divide-current\\/50 > :not(:last-child)) {
       border-color: currentColor;
     }
 
-    :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-current\\/50 > :not(:last-child)) {
+        border-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
+      border-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)) {
+        border-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
+      border-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
+        border-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     :where(.divide-inherit > :not(:last-child)) {
@@ -10772,32 +10838,104 @@ test('bg', async () => {
       background-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\] {
+    .bg-\\[color\\:var\\(--some-var\\)\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 {
+      background-color: var(--some-var);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[color\\:var\\(--some-var\\)\\]\\/50 {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
+    }
+
+    .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
+      background-color: var(--some-var);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
+    }
+
+    .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
+      background-color: var(--some-var);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
+    }
+
+    .bg-\\[var\\(--some-var\\)\\], .bg-\\[var\\(--some-var\\)\\]\\/50 {
+      background-color: var(--some-var);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[var\\(--some-var\\)\\]\\/50 {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
+    }
+
+    .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
       background-color: var(--some-var);
     }
 
-    .bg-\\[color\\:var\\(--some-var\\)\\]\\/50, .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[color\\:var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\] {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
     }
 
-    .bg-\\[var\\(--some-var\\)\\] {
+    .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
       background-color: var(--some-var);
     }
 
-    .bg-\\[var\\(--some-var\\)\\]\\/50, .bg-\\[var\\(--some-var\\)\\]\\/\\[0\\.5\\], .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
-      background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-\\[var\\(--some-var\\)\\]\\/\\[50\\%\\] {
+        background-color: color-mix(in oklab, var(--some-var) 50%, transparent);
+      }
+    }
+
+    .bg-current, .bg-current\\/50 {
+      background-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/50 {
+        background-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .bg-current\\/\\[0\\.5\\] {
+      background-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/\\[0\\.5\\] {
+        background-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .bg-current {
+    .bg-current\\/\\[50\\%\\] {
       background-color: currentColor;
     }
 
-    .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
-      background-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/\\[50\\%\\] {
+        background-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-      background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent);
+      background-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
+        background-color: color-mix(in oklab, currentcolor var(--bg-opacity), transparent);
+      }
     }
 
     .bg-inherit {
@@ -11528,7 +11666,7 @@ test('bg', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-current\\/custom {
-      background-color: color-mix(in srgb, currentcolor var(--custom-opacity), transparent);
+      background-color: currentColor;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -11538,7 +11676,7 @@ test('bg', async () => {
     }
 
     .bg-current\\/half {
-      background-color: color-mix(in srgb, currentcolor .5, transparent);
+      background-color: currentColor;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -11712,36 +11850,105 @@ test('from', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\] {
+    .from-\\[color\\:var\\(--my-color\\)\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      --tw-gradient-from: var(--my-color);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-gradient-from: var(--my-color);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-gradient-from: var(--my-color);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-\\[var\\(--my-color\\)\\], .from-\\[var\\(--my-color\\)\\]\\/50 {
       --tw-gradient-from: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[color\\:var\\(--my-color\\)\\]\\/50, .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-gradient-from: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[var\\(--my-color\\)\\] {
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-from: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-\\[var\\(--my-color\\)\\]\\/50, .from-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-from: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .from-current, .from-current\\/50 {
+      --tw-gradient-from: currentcolor;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-current {
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-current\\/50 {
+        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .from-current\\/\\[0\\.5\\] {
       --tw-gradient-from: currentcolor;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
-      --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-current\\/\\[0\\.5\\] {
+        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .from-current\\/\\[50\\%\\] {
+      --tw-gradient-from: currentcolor;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .from-current\\/\\[50\\%\\] {
+        --tw-gradient-from: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
     .from-inherit {
       --tw-gradient-from: inherit;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -11977,42 +12184,114 @@ test('via', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\] {
+    .via-\\[color\\:var\\(--my-color\\)\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      --tw-gradient-via: var(--my-color);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-gradient-via: var(--my-color);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-gradient-via: var(--my-color);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-\\[var\\(--my-color\\)\\], .via-\\[var\\(--my-color\\)\\]\\/50 {
       --tw-gradient-via: var(--my-color);
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[color\\:var\\(--my-color\\)\\]\\/50, .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-gradient-via: var(--my-color);
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[var\\(--my-color\\)\\] {
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-gradient-via: var(--my-color);
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-\\[var\\(--my-color\\)\\]\\/50, .via-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-via: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .via-current, .via-current\\/50 {
+      --tw-gradient-via: currentcolor;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-current {
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-current\\/50 {
+        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .via-current\\/\\[0\\.5\\] {
       --tw-gradient-via: currentcolor;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
-    .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-current\\/\\[0\\.5\\] {
+        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .via-current\\/\\[50\\%\\] {
+      --tw-gradient-via: currentcolor;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
       --tw-gradient-stops: var(--tw-gradient-via-stops);
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .via-current\\/\\[50\\%\\] {
+        --tw-gradient-via: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
     .via-inherit {
       --tw-gradient-via: inherit;
       --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -12250,95 +12529,164 @@ test('to', async () => {
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\] {
+    .to-\\[color\\:var\\(--my-color\\)\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[color\\:var\\(--my-color\\)\\]\\/50, .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .to-\\[var\\(--my-color\\)\\] {
+    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-\\[var\\(--my-color\\)\\]\\/50, .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .to-current {
-      --tw-gradient-to: currentcolor;
+    .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
-      --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .to-inherit {
-      --tw-gradient-to: inherit;
+    .to-\\[var\\(--my-color\\)\\], .to-\\[var\\(--my-color\\)\\]\\/50 {
+      --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-red-500 {
-      --tw-gradient-to: var(--color-red-500);
-      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .to-red-500\\/50 {
-      --tw-gradient-to: #ef444480;
+    .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/50 {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      .to-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
       }
     }
 
-    .to-red-500\\/\\[0\\.5\\] {
-      --tw-gradient-to: #ef444480;
+    .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-gradient-to: var(--my-color);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/\\[0\\.5\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      .to-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--my-color) 50%, transparent);
       }
     }
 
-    .to-red-500\\/\\[50\\%\\] {
-      --tw-gradient-to: #ef444480;
+    .to-current, .to-current\\/50 {
+      --tw-gradient-to: currentcolor;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      .to-red-500\\/\\[50\\%\\] {
-        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      .to-current\\/50 {
+        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
       }
     }
 
-    .to-transparent {
-      --tw-gradient-to: transparent;
+    .to-current\\/\\[0\\.5\\] {
+      --tw-gradient-to: currentcolor;
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-0\\% {
-      --tw-gradient-to-position: 0%;
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-current\\/\\[0\\.5\\] {
+        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .to-5\\% {
-      --tw-gradient-to-position: 5%;
+    .to-current\\/\\[50\\%\\] {
+      --tw-gradient-to: currentcolor;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
 
-    .to-100\\% {
-      --tw-gradient-to-position: 100%;
-    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-current\\/\\[50\\%\\] {
+        --tw-gradient-to: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .to-inherit {
+      --tw-gradient-to: inherit;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .to-red-500 {
+      --tw-gradient-to: var(--color-red-500);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .to-red-500\\/50 {
+      --tw-gradient-to: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/50 {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .to-red-500\\/\\[0\\.5\\] {
+      --tw-gradient-to: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/\\[0\\.5\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .to-red-500\\/\\[50\\%\\] {
+      --tw-gradient-to: #ef444480;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .to-red-500\\/\\[50\\%\\] {
+        --tw-gradient-to: color-mix(in oklab, var(--color-red-500) 50%, transparent);
+      }
+    }
+
+    .to-transparent {
+      --tw-gradient-to: transparent;
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+
+    .to-0\\% {
+      --tw-gradient-to-position: 0%;
+    }
+
+    .to-5\\% {
+      --tw-gradient-to-position: 5%;
+    }
+
+    .to-100\\% {
+      --tw-gradient-to-position: 100%;
+    }
 
     .to-\\[50\\%\\] {
       --tw-gradient-to-position: 50%;
@@ -18712,12 +19060,34 @@ test('fill', async () => {
       fill: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .fill-current {
+    .fill-current, .fill-current\\/50 {
+      fill: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-current\\/50 {
+        fill: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .fill-current\\/\\[0\\.5\\] {
+      fill: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-current\\/\\[0\\.5\\] {
+        fill: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .fill-current\\/\\[50\\%\\] {
       fill: currentColor;
     }
 
-    .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
-      fill: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .fill-current\\/\\[50\\%\\] {
+        fill: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .fill-inherit {
@@ -18877,28 +19247,94 @@ test('stroke', async () => {
       stroke: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\] {
+    .stroke-\\[color\\:var\\(--my-color\\)\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      stroke: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      stroke: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      stroke: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .stroke-\\[var\\(--my-color\\)\\], .stroke-\\[var\\(--my-color\\)\\]\\/50 {
+      stroke: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[var\\(--my-color\\)\\]\\/50 {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       stroke: var(--my-color);
     }
 
-    .stroke-\\[color\\:var\\(--my-color\\)\\]\\/50, .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .stroke-\\[var\\(--my-color\\)\\] {
+    .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       stroke: var(--my-color);
     }
 
-    .stroke-\\[var\\(--my-color\\)\\]\\/50, .stroke-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        stroke: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .stroke-current, .stroke-current\\/50 {
+      stroke: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-current\\/50 {
+        stroke: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .stroke-current\\/\\[0\\.5\\] {
+      stroke: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-current\\/\\[0\\.5\\] {
+        stroke: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .stroke-current {
+    .stroke-current\\/\\[50\\%\\] {
       stroke: currentColor;
     }
 
-    .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
-      stroke: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .stroke-current\\/\\[50\\%\\] {
+        stroke: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .stroke-inherit {
@@ -19943,12 +20379,34 @@ test('placeholder', async () => {
       color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .placeholder-current::placeholder {
+    .placeholder-current::placeholder, .placeholder-current\\/50::placeholder {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-current\\/50::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .placeholder-current\\/\\[0\\.5\\]::placeholder {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-current\\/\\[0\\.5\\]::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .placeholder-current\\/\\[50\\%\\]::placeholder {
       color: currentColor;
     }
 
-    .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder {
-      color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .placeholder-current\\/\\[50\\%\\]::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .placeholder-inherit::placeholder {
@@ -20112,38 +20570,124 @@ test('decoration', async () => {
       text-decoration-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\] {
+    .decoration-\\[color\\:var\\(--my-color\\)\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      -webkit-text-decoration-color: var(--my-color);
+      -webkit-text-decoration-color: var(--my-color);
+      text-decoration-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      -webkit-text-decoration-color: var(--my-color);
+      -webkit-text-decoration-color: var(--my-color);
+      text-decoration-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      -webkit-text-decoration-color: var(--my-color);
+      -webkit-text-decoration-color: var(--my-color);
+      text-decoration-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .decoration-\\[var\\(--my-color\\)\\], .decoration-\\[var\\(--my-color\\)\\]\\/50 {
+      -webkit-text-decoration-color: var(--my-color);
+      -webkit-text-decoration-color: var(--my-color);
+      text-decoration-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[var\\(--my-color\\)\\]\\/50 {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       -webkit-text-decoration-color: var(--my-color);
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    .decoration-\\[color\\:var\\(--my-color\\)\\]\\/50, .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .decoration-\\[var\\(--my-color\\)\\] {
+    .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       -webkit-text-decoration-color: var(--my-color);
       -webkit-text-decoration-color: var(--my-color);
       text-decoration-color: var(--my-color);
     }
 
-    .decoration-\\[var\\(--my-color\\)\\]\\/50, .decoration-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
-      text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+        text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .decoration-current, .decoration-current\\/50 {
+      text-decoration-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-current\\/50 {
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .decoration-current\\/\\[0\\.5\\] {
+      text-decoration-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-current\\/\\[0\\.5\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .decoration-current {
+    .decoration-current\\/\\[50\\%\\] {
       text-decoration-color: currentColor;
     }
 
-    .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
-      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .decoration-current\\/\\[50\\%\\] {
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+        text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .decoration-inherit {
@@ -20503,7 +21047,7 @@ test('filter', async () => {
     }
 
     .drop-shadow-red-500 {
-      --tw-drop-shadow-color: color-mix(in srgb, #ef4444 var(--tw-drop-shadow-alpha), transparent);
+      --tw-drop-shadow-color: #ef4444;
       --tw-drop-shadow: var(--tw-drop-shadow-size);
     }
 
@@ -20514,7 +21058,7 @@ test('filter', async () => {
     }
 
     .drop-shadow-red-500\\/50 {
-      --tw-drop-shadow-color: color-mix(in srgb, #ef444480 var(--tw-drop-shadow-alpha), transparent);
+      --tw-drop-shadow-color: #ef444480;
       --tw-drop-shadow: var(--tw-drop-shadow-size);
     }
 
@@ -22034,28 +22578,94 @@ test('outline', async () => {
       outline-color: oklab(0% none none / .5);
     }
 
-    .outline-\\[color\\:var\\(--value\\)\\] {
+    .outline-\\[color\\:var\\(--value\\)\\], .outline-\\[color\\:var\\(--value\\)\\]\\/50 {
+      outline-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[color\\:var\\(--value\\)\\]\\/50 {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
+    }
+
+    .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+      outline-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
+    }
+
+    .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+      outline-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
+    }
+
+    .outline-\\[var\\(--value\\)\\], .outline-\\[var\\(--value\\)\\]\\/50 {
+      outline-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[var\\(--value\\)\\]\\/50 {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
+    }
+
+    .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] {
       outline-color: var(--value);
     }
 
-    .outline-\\[color\\:var\\(--value\\)\\]\\/50, .outline-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\] {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
     }
 
-    .outline-\\[var\\(--value\\)\\] {
+    .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
       outline-color: var(--value);
     }
 
-    .outline-\\[var\\(--value\\)\\]\\/50, .outline-\\[var\\(--value\\)\\]\\/\\[0\\.5\\], .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-\\[var\\(--value\\)\\]\\/\\[50\\%\\] {
+        outline-color: color-mix(in oklab, var(--value) 50%, transparent);
+      }
+    }
+
+    .outline-current, .outline-current\\/50 {
+      outline-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-current\\/50 {
+        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .outline-current\\/\\[0\\.5\\] {
+      outline-color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-current\\/\\[0\\.5\\] {
+        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .outline-current {
+    .outline-current\\/\\[50\\%\\] {
       outline-color: currentColor;
     }
 
-    .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
-      outline-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .outline-current\\/\\[50\\%\\] {
+        outline-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .outline-inherit {
@@ -22518,31 +23128,97 @@ test('text', async () => {
       color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\] {
+    .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       color: var(--my-color);
     }
 
-    .text-\\[color\\:var\\(--my-color\\)\\]\\/50, .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .text-\\[var\\(--my-color\\)\\] {
+    .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       color: var(--my-color);
     }
 
-    .text-\\[var\\(--my-color\\)\\]\\/50, .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .text-current {
-      color: currentColor;
+    .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      color: var(--my-color);
     }
 
-    .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
-      color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .text-inherit {
+    .text-\\[var\\(--my-color\\)\\], .text-\\[var\\(--my-color\\)\\]\\/50 {
+      color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[var\\(--my-color\\)\\]\\/50 {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .text-current, .text-current\\/50 {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-current\\/50 {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .text-current\\/\\[0\\.5\\] {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-current\\/\\[0\\.5\\] {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .text-current\\/\\[50\\%\\] {
+      color: currentColor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-current\\/\\[50\\%\\] {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .text-inherit {
       color: inherit;
     }
 
@@ -22729,7 +23405,13 @@ test('text-shadow', async () => {
 
     .text-shadow-\\[10px_10px\\]\\/25 {
       --tw-text-shadow-alpha: 25%;
-      text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      text-shadow: 10px 10px var(--tw-text-shadow-color, currentcolor);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[10px_10px\\]\\/25 {
+        text-shadow: 10px 10px var(--tw-text-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      }
     }
 
     .text-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
@@ -22747,11 +23429,43 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-\\[\\#0088cc\\] {
-      --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #08c;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[\\#0088cc\\] {
+        --tw-text-shadow-color: color-mix(in oklab, #08c var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-\\[\\#0088cc\\]\\/50 {
+      --tw-text-shadow-color: #0088cc80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[\\#0088cc\\]\\/50 {
+        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+      --tw-text-shadow-color: #0088cc80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+      --tw-text-shadow-color: #0088cc80;
     }
 
-    .text-shadow-\\[\\#0088cc\\]\\/50, .text-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+        --tw-text-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-\\[10px_10px\\] {
@@ -22767,11 +23481,43 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-\\[color\\:var\\(--value\\)\\] {
-      --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[color\\:var\\(--value\\)\\] {
+        --tw-text-shadow-color: color-mix(in oklab, var(--value) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+      --tw-text-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+      --tw-text-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
-    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+    .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+      --tw-text-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-\\[shadow\\:var\\(--value\\)\\], .text-shadow-\\[var\\(--value\\)\\] {
@@ -22779,15 +23525,53 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-current {
-      --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-current {
+        --tw-text-shadow-color: color-mix(in oklab, currentcolor var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-current\\/50 {
+      --tw-text-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-current\\/50 {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-current\\/\\[0\\.5\\] {
+      --tw-text-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-current\\/\\[0\\.5\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
+    }
+
+    .text-shadow-current\\/\\[50\\%\\] {
+      --tw-text-shadow-color: currentcolor;
     }
 
-    .text-shadow-current\\/50, .text-shadow-current\\/\\[0\\.5\\], .text-shadow-current\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-current\\/\\[50\\%\\] {
+        --tw-text-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-inherit {
-      --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: inherit;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-inherit {
+        --tw-text-shadow-color: color-mix(in oklab, inherit var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     .text-shadow-none {
@@ -22795,7 +23579,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500 {
-      --tw-text-shadow-color: color-mix(in srgb, #ef4444 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef4444;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22805,7 +23589,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/2\\.5 {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22815,7 +23599,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/2\\.25 {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444406 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22825,7 +23609,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/2\\.75 {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444407 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444407;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22835,7 +23619,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/50 {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22845,7 +23629,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/\\[0\\.5\\] {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22855,7 +23639,7 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-red-500\\/\\[50\\%\\] {
-      --tw-text-shadow-color: color-mix(in srgb, #ef444480 var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -22869,7 +23653,13 @@ test('text-shadow', async () => {
     }
 
     .text-shadow-transparent {
-      --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent);
+      --tw-text-shadow-color: transparent;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .text-shadow-transparent {
+        --tw-text-shadow-color: color-mix(in oklab, transparent var(--tw-text-shadow-alpha), transparent);
+      }
     }
 
     @property --tw-text-shadow-color {
@@ -22906,7 +23696,7 @@ test('text-shadow', async () => {
   ).toEqual('')
 })
 
-test.only('shadow', async () => {
+test('shadow', async () => {
   expect(
     await compileCss(
       css`
@@ -23471,10 +24261,16 @@ test('inset-shadow', async () => {
 
     .inset-shadow-\\[10px_10px\\]\\/25 {
       --tw-inset-shadow-alpha: 25%;
-      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[10px_10px\\]\\/25 {
+        --tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, color-mix(in oklab, currentcolor 25%, transparent));
+      }
+    }
+
     .inset-shadow-\\[12px_12px_\\#0088cc\\]\\/25 {
       --tw-inset-shadow-alpha: 25%;
       --tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, oklab(59.9824% -.067 -.124 / .25));
@@ -23528,35 +24324,137 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-\\[\\#0088cc\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #08c;
     }
 
-    .inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[\\#0088cc\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, #08c var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-\\[\\#0088cc\\]\\/50 {
+      --tw-inset-shadow-color: #0088cc80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[\\#0088cc\\]\\/50 {
+        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+      --tw-inset-shadow-color: #0088cc80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: #0088cc80;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, oklab(59.9824% -.067 -.124 / .5) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-\\[color\\:var\\(--value\\)\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[color\\:var\\(--value\\)\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, var(--value) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
-    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50, .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+      --tw-inset-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/50 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+      --tw-inset-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[0\\.5\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: var(--value);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-\\[color\\:var\\(--value\\)\\]\\/\\[50\\%\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--value) 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-current {
-      --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-current {
+        --tw-inset-shadow-color: color-mix(in oklab, currentcolor var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
-    .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+    .inset-shadow-current\\/50 {
+      --tw-inset-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-current\\/50 {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-current\\/\\[0\\.5\\] {
+      --tw-inset-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-current\\/\\[0\\.5\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
+    }
+
+    .inset-shadow-current\\/\\[50\\%\\] {
+      --tw-inset-shadow-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-current\\/\\[50\\%\\] {
+        --tw-inset-shadow-color: color-mix(in oklab, color-mix(in oklab, currentcolor 50%, transparent) var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-inherit {
-      --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: inherit;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-inherit {
+        --tw-inset-shadow-color: color-mix(in oklab, inherit var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     .inset-shadow-red-500 {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef4444 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef4444;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23566,7 +24464,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/2\\.5 {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23576,7 +24474,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/2\\.25 {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444406 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444406;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23586,7 +24484,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/2\\.75 {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444407 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444407;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23596,7 +24494,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/50 {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23606,7 +24504,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/\\[0\\.5\\] {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23616,7 +24514,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-red-500\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: color-mix(in srgb, #ef444480 var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: #ef444480;
     }
 
     @supports (color: color-mix(in lab, red, red)) {
@@ -23626,7 +24524,13 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-transparent {
-      --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent);
+      --tw-inset-shadow-color: transparent;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-shadow-transparent {
+        --tw-inset-shadow-color: color-mix(in oklab, transparent var(--tw-inset-shadow-alpha), transparent);
+      }
     }
 
     @property --tw-shadow {
@@ -23848,28 +24752,94 @@ test('ring', async () => {
       --tw-ring-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\] {
+    .ring-\\[color\\:var\\(--my-color\\)\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       --tw-ring-color: var(--my-color);
     }
 
-    .ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .ring-\\[var\\(--my-color\\)\\] {
+    .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       --tw-ring-color: var(--my-color);
     }
 
-    .ring-\\[var\\(--my-color\\)\\]\\/50, .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .ring-current {
+    .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-\\[var\\(--my-color\\)\\], .ring-\\[var\\(--my-color\\)\\]\\/50 {
+      --tw-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-current, .ring-current\\/50 {
+      --tw-ring-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-current\\/50 {
+        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .ring-current\\/\\[0\\.5\\] {
       --tw-ring-color: currentcolor;
     }
 
-    .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
-      --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-current\\/\\[0\\.5\\] {
+        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .ring-current\\/\\[50\\%\\] {
+      --tw-ring-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-current\\/\\[50\\%\\] {
+        --tw-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .ring-inherit {
@@ -24297,28 +25267,94 @@ test('inset-ring', async () => {
       --tw-inset-ring-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\] {
+    .inset-ring-\\[color\\:var\\(--my-color\\)\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+      --tw-inset-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-inset-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/50, .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .inset-ring-\\[var\\(--my-color\\)\\] {
+    .inset-ring-\\[var\\(--my-color\\)\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/50 {
       --tw-inset-ring-color: var(--my-color);
     }
 
-    .inset-ring-\\[var\\(--my-color\\)\\]\\/50, .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-inset-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-inset-ring-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-inset-ring-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .inset-ring-current, .inset-ring-current\\/50 {
+      --tw-inset-ring-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-current\\/50 {
+        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
-    .inset-ring-current {
+    .inset-ring-current\\/\\[0\\.5\\] {
       --tw-inset-ring-color: currentcolor;
     }
 
-    .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {
-      --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-current\\/\\[0\\.5\\] {
+        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .inset-ring-current\\/\\[50\\%\\] {
+      --tw-inset-ring-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .inset-ring-current\\/\\[50\\%\\] {
+        --tw-inset-ring-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .inset-ring-inherit {
@@ -24597,28 +25633,94 @@ test('ring-offset', async () => {
       --tw-ring-offset-color: oklab(59.9824% -.067 -.124 / .5);
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\] {
+    .ring-offset-\\[color\\:var\\(--my-color\\)\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50, .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/50 {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
     }
 
-    .ring-offset-\\[var\\(--my-color\\)\\] {
+    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
       --tw-ring-offset-color: var(--my-color);
     }
 
-    .ring-offset-\\[var\\(--my-color\\)\\]\\/50, .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-ring-offset-color: var(--my-color);
     }
 
-    .ring-offset-current {
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[color\\:var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-offset-\\[var\\(--my-color\\)\\], .ring-offset-\\[var\\(--my-color\\)\\]\\/50 {
+      --tw-ring-offset-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[var\\(--my-color\\)\\]\\/50 {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+      --tw-ring-offset-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[0\\.5\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+      --tw-ring-offset-color: var(--my-color);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-\\[var\\(--my-color\\)\\]\\/\\[50\\%\\] {
+        --tw-ring-offset-color: color-mix(in oklab, var(--my-color) 50%, transparent);
+      }
+    }
+
+    .ring-offset-current, .ring-offset-current\\/50 {
+      --tw-ring-offset-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-current\\/50 {
+        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .ring-offset-current\\/\\[0\\.5\\] {
+      --tw-ring-offset-color: currentcolor;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-current\\/\\[0\\.5\\] {
+        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+
+    .ring-offset-current\\/\\[50\\%\\] {
       --tw-ring-offset-color: currentcolor;
     }
 
-    .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {
-      --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      .ring-offset-current\\/\\[50\\%\\] {
+        --tw-ring-offset-color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
     }
 
     .ring-offset-inherit {

From 0d1109bd267727196047f476532000f0182e9a31 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 16:03:07 +0200
Subject: [PATCH 5/7] Remove unused var

---
 packages/tailwindcss/src/ast.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts
index 4c92f055efba..af76b0772faf 100644
--- a/packages/tailwindcss/src/ast.ts
+++ b/packages/tailwindcss/src/ast.ts
@@ -334,7 +334,6 @@ export function optimizeAst(
 
           let containsUnresolvableVars = false
           let containsCurrentcolor = false
-          let didInlineVars = false
           ValueParser.walk(node.nodes, (node, { replaceWith }) => {
             if (node.kind == 'word' && node.value.toLowerCase() === 'currentcolor') {
               containsCurrentcolor = true

From 6e1a825857bcb9a7436b1042cb9ea04e918afb8e Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 16:31:07 +0200
Subject: [PATCH 6/7] Update snpashots

---
 integrations/cli/index.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
index ab6db920c04a..d30f6e24bb37 100644
--- a/integrations/cli/index.test.ts
+++ b/integrations/cli/index.test.ts
@@ -1711,9 +1711,9 @@ test(
         }
         @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
           ::placeholder {
-            color: currentColor;
+            color: currentcolor;
             @supports (color: color-mix(in lab, red, red)) {
-              color: color-mix(in oklab, currentColor 50%, transparent);
+              color: color-mix(in oklab, currentcolor 50%, transparent);
             }
           }
         }

From 30049fe7dfe6dccccf638bf122cb095242a637eb Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Thu, 3 Apr 2025 16:32:47 +0200
Subject: [PATCH 7/7] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87585fd51e4f..a14843895943 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `drop-shadow-*` utilities that use multiple shadows in `@theme inline` ([#17515](https://github.com/tailwindlabs/tailwindcss/pull/17515))
 - PostCSS: Fix race condition when two changes are queued concurrently ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
 - PostCSS: Ensure we process files containing an `@tailwind utilities;` directive ([#17514](https://github.com/tailwindlabs/tailwindcss/pull/17514))
+- Ensure the `color-mix(…)` polyfill creates fallbacks even when using colors that can not be statically analyzed ([#17513](https://github.com/tailwindlabs/tailwindcss/pull/17513))
 
 ## [4.1.1] - 2025-04-02