Revert "Don't use color-mix(…) on currentColor (#17247)"

philipp-spiess · philipp-spiess · commit 81d417311045 · 2025-03-20T17:19:55.000+01:00
This reverts commit d6d913e.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,7 +24,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix incorrect angle in `-bg-conic-*` utilities ([#17174](https://github.com/tailwindlabs/tailwindcss/pull/17174))
 - Fix `border-[12px_4px]` being interpreted as a `border-color` instead of a `border-width` ([#17248](https://github.com/tailwindlabs/tailwindcss/pull/17248))
-- Use the `oklab(…)` function when applying opacity to `currentColor` to work around a crash in Safari 16.4 and 16.5 ([#17247](https://github.com/tailwindlabs/tailwindcss/pull/17247))
 - Pre-process `<template lang="…">` in Vue files ([#17252](https://github.com/tailwindlabs/tailwindcss/pull/17252))
 - Ensure that all CSS variables used by preflight are prefixed ([#17036](https://github.com/tailwindlabs/tailwindcss/pull/17036))
 
diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -161,7 +161,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: oklab(from currentColor l a b / 50%);
+    color: color-mix(in oklab, currentColor 50%, transparent);
   }
 
   textarea {
diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
@@ -277,12 +277,12 @@ textarea,
 
 /*
   1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  2. Set the default placeholder color to a semi-transparent version of the current text color. We use the `oklab(…)` function to work around an issue in Safari 16.4 and 16.5. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+  2. Set the default placeholder color to a semi-transparent version of the current text color.
 */
 
 ::placeholder {
   opacity: 1; /* 1 */
-  color: oklab(from currentColor l a b / 50%); /* 2 */
+  color: color-mix(in oklab, currentColor 50%, transparent); /* 2 */
 }
 
 /*
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -250,7 +250,7 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
 
   ::placeholder {
     opacity: 1;
-    color: oklab(from currentColor l a b / 50%);
+    color: color-mix(in oklab, currentColor 50%, transparent);
   }
 
   textarea {
diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
@@ -104,7 +104,7 @@ exports[`border-* 1`] = `
 }
 
 .border-current\\/50 {
-  border-color: oklab(from currentColor l a b / 50%);
+  border-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-inherit {
@@ -246,7 +246,7 @@ exports[`border-b-* 1`] = `
 }
 
 .border-b-current\\/50 {
-  border-bottom-color: oklab(from currentColor l a b / 50%);
+  border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-b-inherit {
@@ -388,7 +388,7 @@ exports[`border-e-* 1`] = `
 }
 
 .border-e-current\\/50 {
-  border-inline-end-color: oklab(from currentColor l a b / 50%);
+  border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-e-inherit {
@@ -530,7 +530,7 @@ exports[`border-l-* 1`] = `
 }
 
 .border-l-current\\/50 {
-  border-left-color: oklab(from currentColor l a b / 50%);
+  border-left-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-l-inherit {
@@ -672,7 +672,7 @@ exports[`border-r-* 1`] = `
 }
 
 .border-r-current\\/50 {
-  border-right-color: oklab(from currentColor l a b / 50%);
+  border-right-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-r-inherit {
@@ -814,7 +814,7 @@ exports[`border-s-* 1`] = `
 }
 
 .border-s-current\\/50 {
-  border-inline-start-color: oklab(from currentColor l a b / 50%);
+  border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-s-inherit {
@@ -956,7 +956,7 @@ exports[`border-t-* 1`] = `
 }
 
 .border-t-current\\/50 {
-  border-top-color: oklab(from currentColor l a b / 50%);
+  border-top-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-t-inherit {
@@ -1098,7 +1098,7 @@ exports[`border-x-* 1`] = `
 }
 
 .border-x-current\\/50 {
-  border-inline-color: oklab(from currentColor l a b / 50%);
+  border-inline-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-x-inherit {
@@ -1240,7 +1240,7 @@ exports[`border-y-* 1`] = `
 }
 
 .border-y-current\\/50 {
-  border-block-color: oklab(from currentColor l a b / 50%);
+  border-block-color: color-mix(in oklab, currentColor 50%, transparent);
 }
 
 .border-y-inherit {
diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts
@@ -3860,7 +3860,7 @@ describe('matchUtilities()', () => {
       }
 
       .scrollbar-current\\/45 {
-        scrollbar-color: oklab(from currentColor l a b / 45%);
+        scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);
       }"
     `)
   })
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -8058,7 +8058,7 @@ test('accent', async () => {
     }
 
     .accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {
-      accent-color: oklab(from currentColor l a b / 50%);
+      accent-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .accent-inherit {
@@ -8173,7 +8173,7 @@ test('caret', async () => {
     }
 
     .caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {
-      caret-color: oklab(from currentColor l a b / 50%);
+      caret-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .caret-inherit {
@@ -8286,7 +8286,7 @@ test('divide-color', async () => {
     }
 
     :where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {
-      border-color: oklab(from currentColor l a b / 50%);
+      border-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     :where(.divide-inherit > :not(:last-child)) {
@@ -10248,11 +10248,11 @@ test('bg', async () => {
     }
 
     .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
-      background-color: oklab(from currentColor l a b / 50%);
+      background-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .bg-current\\/\\[var\\(--bg-opacity\\)\\] {
-      background-color: oklab(from currentColor l a b / var(--bg-opacity));
+      background-color: color-mix(in oklab, currentColor var(--bg-opacity), transparent);
     }
 
     .bg-inherit {
@@ -10770,11 +10770,11 @@ test('bg', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ".bg-current\\/custom {
-      background-color: oklab(from currentColor l a b / var(--opacity-custom, var(--custom-opacity)));
+      background-color: color-mix(in oklab, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);
     }
 
     .bg-current\\/half {
-      background-color: oklab(from currentColor l a b / var(--opacity-half, .5));
+      background-color: color-mix(in oklab, currentColor var(--opacity-half, .5), transparent);
     }
 
     .\\[color\\:red\\]\\/half {
@@ -10868,7 +10868,7 @@ test('from', async () => {
     }
 
     .from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {
-      --tw-gradient-from: oklab(from currentColor l a b / 50%);
+      --tw-gradient-from: 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));
     }
 
@@ -11094,7 +11094,7 @@ test('via', async () => {
     }
 
     .via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {
-      --tw-gradient-via: oklab(from currentColor l a b / 50%);
+      --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent);
       --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);
     }
@@ -11316,7 +11316,7 @@ test('to', async () => {
     }
 
     .to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {
-      --tw-gradient-to: oklab(from currentColor l a b / 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));
     }
 
@@ -11843,7 +11843,7 @@ test('fill', async () => {
     }
 
     .fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {
-      fill: oklab(from currentColor l a b / 50%);
+      fill: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .fill-inherit {
@@ -11980,7 +11980,7 @@ test('stroke', async () => {
     }
 
     .stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {
-      stroke: oklab(from currentColor l a b / 50%);
+      stroke: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .stroke-inherit {
@@ -12956,7 +12956,7 @@ test('placeholder', async () => {
     }
 
     .placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder {
-      color: oklab(from currentColor l a b / 50%);
+      color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .placeholder-inherit::placeholder {
@@ -13105,9 +13105,9 @@ test('decoration', async () => {
     }
 
     .decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {
-      -webkit-text-decoration-color: oklab(from currentColor l a b / 50%);
-      -webkit-text-decoration-color: oklab(from currentColor l a b / 50%);
-      text-decoration-color: oklab(from currentColor l a b / 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 {
@@ -14810,7 +14810,7 @@ test('outline', async () => {
     }
 
     .outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {
-      outline-color: oklab(from currentColor l a b / 50%);
+      outline-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .outline-inherit {
@@ -15260,7 +15260,7 @@ test('text', async () => {
     }
 
     .text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {
-      color: oklab(from currentColor l a b / 50%);
+      color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .text-inherit {
@@ -15429,7 +15429,7 @@ test('shadow', async () => {
     }
 
     .shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
-      --tw-shadow-color: oklab(from currentColor l a b / 50%);
+      --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .shadow-inherit {
@@ -15651,7 +15651,7 @@ test('inset-shadow', async () => {
     }
 
     .inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
-      --tw-inset-shadow-color: oklab(from currentColor l a b / 50%);
+      --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .inset-shadow-inherit {
@@ -15889,7 +15889,7 @@ test('ring', async () => {
     }
 
     .ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {
-      --tw-ring-color: oklab(from currentColor l a b / 50%);
+      --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .ring-inherit {
@@ -16228,7 +16228,7 @@ test('inset-ring', async () => {
     }
 
     .inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {
-      --tw-inset-ring-color: oklab(from currentColor l a b / 50%);
+      --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .inset-ring-inherit {
@@ -16472,7 +16472,7 @@ test('ring-offset', async () => {
     }
 
     .ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {
-      --tw-ring-offset-color: oklab(from currentColor l a b / 50%);
+      --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent);
     }
 
     .ring-offset-inherit {
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -136,13 +136,6 @@ export function withAlpha(value: string, alpha: string): string {
     alpha = `${alphaAsNumber * 100}%`
   }
 
-  // Use the `oklab(…)` function when applying alpha to `currentColor` to work
-  // around a crash with Safari 16.4 and 16.5
-  // https://github.com/tailwindlabs/tailwindcss/issues/17194
-  if (value === 'currentColor') {
-    return `oklab(from currentColor l a b / ${alpha})`
-  }
-
   return `color-mix(in oklab, ${value} ${alpha}, transparent)`
 }
 

Original file line number	Diff line number	Diff line change
@@ -161,7 +161,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
`161`	`161`
`162`	`162`	`::placeholder {`
`163`	`163`	`opacity: 1;`
`164`		`- color: oklab(from currentColor l a b / 50%);`
	`164`	`+ color: color-mix(in oklab, currentColor 50%, transparent);`
`165`	`165`	`}`
`166`	`166`
`167`	`167`	`textarea {`
Original file line number	Diff line number	Diff line change
@@ -250,7 +250,7 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
`250`	`250`
`251`	`251`	`::placeholder {`
`252`	`252`	`opacity: 1;`
`253`		`- color: oklab(from currentColor l a b / 50%);`
	`253`	`+ color: color-mix(in oklab, currentColor 50%, transparent);`
`254`	`254`	`}`
`255`	`255`
`256`	`256`	`textarea {`
Original file line number	Diff line number	Diff line change
@@ -104,7 +104,7 @@ exports[`border-* 1`] = `
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`.border-current\\/50 {`
`107`		`- border-color: oklab(from currentColor l a b / 50%);`
	`107`	`+ border-color: color-mix(in oklab, currentColor 50%, transparent);`
`108`	`108`	`}`
`109`	`109`
`110`	`110`	`.border-inherit {`
@@ -246,7 +246,7 @@ exports[`border-b-* 1`] = `
`246`	`246`	`}`
`247`	`247`
`248`	`248`	`.border-b-current\\/50 {`
`249`		`- border-bottom-color: oklab(from currentColor l a b / 50%);`
	`249`	`+ border-bottom-color: color-mix(in oklab, currentColor 50%, transparent);`
`250`	`250`	`}`
`251`	`251`
`252`	`252`	`.border-b-inherit {`
@@ -388,7 +388,7 @@ exports[`border-e-* 1`] = `
`388`	`388`	`}`
`389`	`389`
`390`	`390`	`.border-e-current\\/50 {`
`391`		`- border-inline-end-color: oklab(from currentColor l a b / 50%);`
	`391`	`+ border-inline-end-color: color-mix(in oklab, currentColor 50%, transparent);`
`392`	`392`	`}`
`393`	`393`
`394`	`394`	`.border-e-inherit {`
@@ -530,7 +530,7 @@ exports[`border-l-* 1`] = `
`530`	`530`	`}`
`531`	`531`
`532`	`532`	`.border-l-current\\/50 {`
`533`		`- border-left-color: oklab(from currentColor l a b / 50%);`
	`533`	`+ border-left-color: color-mix(in oklab, currentColor 50%, transparent);`
`534`	`534`	`}`
`535`	`535`
`536`	`536`	`.border-l-inherit {`
@@ -672,7 +672,7 @@ exports[`border-r-* 1`] = `
`672`	`672`	`}`
`673`	`673`
`674`	`674`	`.border-r-current\\/50 {`
`675`		`- border-right-color: oklab(from currentColor l a b / 50%);`
	`675`	`+ border-right-color: color-mix(in oklab, currentColor 50%, transparent);`
`676`	`676`	`}`
`677`	`677`
`678`	`678`	`.border-r-inherit {`
@@ -814,7 +814,7 @@ exports[`border-s-* 1`] = `
`814`	`814`	`}`
`815`	`815`
`816`	`816`	`.border-s-current\\/50 {`
`817`		`- border-inline-start-color: oklab(from currentColor l a b / 50%);`
	`817`	`+ border-inline-start-color: color-mix(in oklab, currentColor 50%, transparent);`
`818`	`818`	`}`
`819`	`819`
`820`	`820`	`.border-s-inherit {`
@@ -956,7 +956,7 @@ exports[`border-t-* 1`] = `
`956`	`956`	`}`
`957`	`957`
`958`	`958`	`.border-t-current\\/50 {`
`959`		`- border-top-color: oklab(from currentColor l a b / 50%);`
	`959`	`+ border-top-color: color-mix(in oklab, currentColor 50%, transparent);`
`960`	`960`	`}`
`961`	`961`
`962`	`962`	`.border-t-inherit {`
@@ -1098,7 +1098,7 @@ exports[`border-x-* 1`] = `
`1098`	`1098`	`}`
`1099`	`1099`
`1100`	`1100`	`.border-x-current\\/50 {`
`1101`		`- border-inline-color: oklab(from currentColor l a b / 50%);`
	`1101`	`+ border-inline-color: color-mix(in oklab, currentColor 50%, transparent);`
`1102`	`1102`	`}`
`1103`	`1103`
`1104`	`1104`	`.border-x-inherit {`
@@ -1240,7 +1240,7 @@ exports[`border-y-* 1`] = `
`1240`	`1240`	`}`
`1241`	`1241`
`1242`	`1242`	`.border-y-current\\/50 {`
`1243`		`- border-block-color: oklab(from currentColor l a b / 50%);`
	`1243`	`+ border-block-color: color-mix(in oklab, currentColor 50%, transparent);`
`1244`	`1244`	`}`
`1245`	`1245`
`1246`	`1246`	`.border-y-inherit {`
Original file line number	Diff line number	Diff line change
`@@ -3860,7 +3860,7 @@ describe('matchUtilities()', () => {`
`3860`	`3860`	`}`
`3861`	`3861`
`3862`	`3862`	`.scrollbar-current\\/45 {`
`3863`		`- scrollbar-color: oklab(from currentColor l a b / 45%);`
	`3863`	`+ scrollbar-color: color-mix(in oklab, currentColor 45%, transparent);`
`3864`	`3864`	`}"`
`3865`	`3865`	`)
`3866`	`3866`	`})`
Original file line number	Diff line number	Diff line change
`@@ -8058,7 +8058,7 @@ test('accent', async () => {`
`8058`	`8058`	`}`
`8059`	`8059`
`8060`	`8060`	`.accent-current\\/50, .accent-current\\/\\[0\\.5\\], .accent-current\\/\\[50\\%\\] {`
`8061`		`- accent-color: oklab(from currentColor l a b / 50%);`
	`8061`	`+ accent-color: color-mix(in oklab, currentColor 50%, transparent);`
`8062`	`8062`	`}`
`8063`	`8063`
`8064`	`8064`	`.accent-inherit {`
`@@ -8173,7 +8173,7 @@ test('caret', async () => {`
`8173`	`8173`	`}`
`8174`	`8174`
`8175`	`8175`	`.caret-current\\/50, .caret-current\\/\\[0\\.5\\], .caret-current\\/\\[50\\%\\] {`
`8176`		`- caret-color: oklab(from currentColor l a b / 50%);`
	`8176`	`+ caret-color: color-mix(in oklab, currentColor 50%, transparent);`
`8177`	`8177`	`}`
`8178`	`8178`
`8179`	`8179`	`.caret-inherit {`
`@@ -8286,7 +8286,7 @@ test('divide-color', async () => {`
`8286`	`8286`	`}`
`8287`	`8287`
`8288`	`8288`	`:where(.divide-current\\/50 > :not(:last-child)), :where(.divide-current\\/\\[0\\.5\\] > :not(:last-child)), :where(.divide-current\\/\\[50\\%\\] > :not(:last-child)) {`
`8289`		`- border-color: oklab(from currentColor l a b / 50%);`
	`8289`	`+ border-color: color-mix(in oklab, currentColor 50%, transparent);`
`8290`	`8290`	`}`
`8291`	`8291`
`8292`	`8292`	`:where(.divide-inherit > :not(:last-child)) {`
`@@ -10248,11 +10248,11 @@ test('bg', async () => {`
`10248`	`10248`	`}`
`10249`	`10249`
`10250`	`10250`	`.bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {`
`10251`		`- background-color: oklab(from currentColor l a b / 50%);`
	`10251`	`+ background-color: color-mix(in oklab, currentColor 50%, transparent);`
`10252`	`10252`	`}`
`10253`	`10253`
`10254`	`10254`	`.bg-current\\/\\[var\\(--bg-opacity\\)\\] {`
`10255`		`- background-color: oklab(from currentColor l a b / var(--bg-opacity));`
	`10255`	`+ background-color: color-mix(in oklab, currentColor var(--bg-opacity), transparent);`
`10256`	`10256`	`}`
`10257`	`10257`
`10258`	`10258`	`.bg-inherit {`
`@@ -10770,11 +10770,11 @@ test('bg', async () => {`
`10770`	`10770`	`),`
`10771`	`10771`	).toMatchInlineSnapshot(`
`10772`	`10772`	`".bg-current\\/custom {`
`10773`		`- background-color: oklab(from currentColor l a b / var(--opacity-custom, var(--custom-opacity)));`
	`10773`	`+ background-color: color-mix(in oklab, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);`
`10774`	`10774`	`}`
`10775`	`10775`
`10776`	`10776`	`.bg-current\\/half {`
`10777`		`- background-color: oklab(from currentColor l a b / var(--opacity-half, .5));`
	`10777`	`+ background-color: color-mix(in oklab, currentColor var(--opacity-half, .5), transparent);`
`10778`	`10778`	`}`
`10779`	`10779`
`10780`	`10780`	`.\\[color\\:red\\]\\/half {`
`@@ -10868,7 +10868,7 @@ test('from', async () => {`
`10868`	`10868`	`}`
`10869`	`10869`
`10870`	`10870`	`.from-current\\/50, .from-current\\/\\[0\\.5\\], .from-current\\/\\[50\\%\\] {`
`10871`		`- --tw-gradient-from: oklab(from currentColor l a b / 50%);`
	`10871`	`+ --tw-gradient-from: color-mix(in oklab, currentColor 50%, transparent);`
`10872`	`10872`	`--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));`
`10873`	`10873`	`}`
`10874`	`10874`
`@@ -11094,7 +11094,7 @@ test('via', async () => {`
`11094`	`11094`	`}`
`11095`	`11095`
`11096`	`11096`	`.via-current\\/50, .via-current\\/\\[0\\.5\\], .via-current\\/\\[50\\%\\] {`
`11097`		`- --tw-gradient-via: oklab(from currentColor l a b / 50%);`
	`11097`	`+ --tw-gradient-via: color-mix(in oklab, currentColor 50%, transparent);`
`11098`	`11098`	`--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);`
`11099`	`11099`	`--tw-gradient-stops: var(--tw-gradient-via-stops);`
`11100`	`11100`	`}`
`@@ -11316,7 +11316,7 @@ test('to', async () => {`
`11316`	`11316`	`}`
`11317`	`11317`
`11318`	`11318`	`.to-current\\/50, .to-current\\/\\[0\\.5\\], .to-current\\/\\[50\\%\\] {`
`11319`		`- --tw-gradient-to: oklab(from currentColor l a b / 50%);`
	`11319`	`+ --tw-gradient-to: color-mix(in oklab, currentColor 50%, transparent);`
`11320`	`11320`	`--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));`
`11321`	`11321`	`}`
`11322`	`11322`
`@@ -11843,7 +11843,7 @@ test('fill', async () => {`
`11843`	`11843`	`}`
`11844`	`11844`
`11845`	`11845`	`.fill-current\\/50, .fill-current\\/\\[0\\.5\\], .fill-current\\/\\[50\\%\\] {`
`11846`		`- fill: oklab(from currentColor l a b / 50%);`
	`11846`	`+ fill: color-mix(in oklab, currentColor 50%, transparent);`
`11847`	`11847`	`}`
`11848`	`11848`
`11849`	`11849`	`.fill-inherit {`
`@@ -11980,7 +11980,7 @@ test('stroke', async () => {`
`11980`	`11980`	`}`
`11981`	`11981`
`11982`	`11982`	`.stroke-current\\/50, .stroke-current\\/\\[0\\.5\\], .stroke-current\\/\\[50\\%\\] {`
`11983`		`- stroke: oklab(from currentColor l a b / 50%);`
	`11983`	`+ stroke: color-mix(in oklab, currentColor 50%, transparent);`
`11984`	`11984`	`}`
`11985`	`11985`
`11986`	`11986`	`.stroke-inherit {`
`@@ -12956,7 +12956,7 @@ test('placeholder', async () => {`
`12956`	`12956`	`}`
`12957`	`12957`
`12958`	`12958`	`.placeholder-current\\/50::placeholder, .placeholder-current\\/\\[0\\.5\\]::placeholder, .placeholder-current\\/\\[50\\%\\]::placeholder {`
`12959`		`- color: oklab(from currentColor l a b / 50%);`
	`12959`	`+ color: color-mix(in oklab, currentColor 50%, transparent);`
`12960`	`12960`	`}`
`12961`	`12961`
`12962`	`12962`	`.placeholder-inherit::placeholder {`
`@@ -13105,9 +13105,9 @@ test('decoration', async () => {`
`13105`	`13105`	`}`
`13106`	`13106`
`13107`	`13107`	`.decoration-current\\/50, .decoration-current\\/\\[0\\.5\\], .decoration-current\\/\\[50\\%\\] {`
`13108`		`- -webkit-text-decoration-color: oklab(from currentColor l a b / 50%);`
`13109`		`- -webkit-text-decoration-color: oklab(from currentColor l a b / 50%);`
`13110`		`- text-decoration-color: oklab(from currentColor l a b / 50%);`
	`13108`	`+ -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);`
	`13109`	`+ -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);`
	`13110`	`+ text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);`
`13111`	`13111`	`}`
`13112`	`13112`
`13113`	`13113`	`.decoration-inherit {`
`@@ -14810,7 +14810,7 @@ test('outline', async () => {`
`14810`	`14810`	`}`
`14811`	`14811`
`14812`	`14812`	`.outline-current\\/50, .outline-current\\/\\[0\\.5\\], .outline-current\\/\\[50\\%\\] {`
`14813`		`- outline-color: oklab(from currentColor l a b / 50%);`
	`14813`	`+ outline-color: color-mix(in oklab, currentColor 50%, transparent);`
`14814`	`14814`	`}`
`14815`	`14815`
`14816`	`14816`	`.outline-inherit {`
`@@ -15260,7 +15260,7 @@ test('text', async () => {`
`15260`	`15260`	`}`
`15261`	`15261`
`15262`	`15262`	`.text-current\\/50, .text-current\\/\\[0\\.5\\], .text-current\\/\\[50\\%\\] {`
`15263`		`- color: oklab(from currentColor l a b / 50%);`
	`15263`	`+ color: color-mix(in oklab, currentColor 50%, transparent);`
`15264`	`15264`	`}`
`15265`	`15265`
`15266`	`15266`	`.text-inherit {`
`@@ -15429,7 +15429,7 @@ test('shadow', async () => {`
`15429`	`15429`	`}`
`15430`	`15430`
`15431`	`15431`	`.shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {`
`15432`		`- --tw-shadow-color: oklab(from currentColor l a b / 50%);`
	`15432`	`+ --tw-shadow-color: color-mix(in oklab, currentColor 50%, transparent);`
`15433`	`15433`	`}`
`15434`	`15434`
`15435`	`15435`	`.shadow-inherit {`
`@@ -15651,7 +15651,7 @@ test('inset-shadow', async () => {`
`15651`	`15651`	`}`
`15652`	`15652`
`15653`	`15653`	`.inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {`
`15654`		`- --tw-inset-shadow-color: oklab(from currentColor l a b / 50%);`
	`15654`	`+ --tw-inset-shadow-color: color-mix(in oklab, currentColor 50%, transparent);`
`15655`	`15655`	`}`
`15656`	`15656`
`15657`	`15657`	`.inset-shadow-inherit {`
`@@ -15889,7 +15889,7 @@ test('ring', async () => {`
`15889`	`15889`	`}`
`15890`	`15890`
`15891`	`15891`	`.ring-current\\/50, .ring-current\\/\\[0\\.5\\], .ring-current\\/\\[50\\%\\] {`
`15892`		`- --tw-ring-color: oklab(from currentColor l a b / 50%);`
	`15892`	`+ --tw-ring-color: color-mix(in oklab, currentColor 50%, transparent);`
`15893`	`15893`	`}`
`15894`	`15894`
`15895`	`15895`	`.ring-inherit {`
`@@ -16228,7 +16228,7 @@ test('inset-ring', async () => {`
`16228`	`16228`	`}`
`16229`	`16229`
`16230`	`16230`	`.inset-ring-current\\/50, .inset-ring-current\\/\\[0\\.5\\], .inset-ring-current\\/\\[50\\%\\] {`
`16231`		`- --tw-inset-ring-color: oklab(from currentColor l a b / 50%);`
	`16231`	`+ --tw-inset-ring-color: color-mix(in oklab, currentColor 50%, transparent);`
`16232`	`16232`	`}`
`16233`	`16233`
`16234`	`16234`	`.inset-ring-inherit {`
`@@ -16472,7 +16472,7 @@ test('ring-offset', async () => {`
`16472`	`16472`	`}`
`16473`	`16473`
`16474`	`16474`	`.ring-offset-current\\/50, .ring-offset-current\\/\\[0\\.5\\], .ring-offset-current\\/\\[50\\%\\] {`
`16475`		`- --tw-ring-offset-color: oklab(from currentColor l a b / 50%);`
	`16475`	`+ --tw-ring-offset-color: color-mix(in oklab, currentColor 50%, transparent);`
`16476`	`16476`	`}`
`16477`	`16477`
`16478`	`16478`	`.ring-offset-inherit {`
Original file line number	Diff line number	Diff line change
`@@ -136,13 +136,6 @@ export function withAlpha(value: string, alpha: string): string {`
`136`	`136`	alpha = `${alphaAsNumber * 100}%`
`137`	`137`	`}`
`138`	`138`
`139`		- // Use the `oklab(…)` function when applying alpha to `currentColor` to work
`140`		`- // around a crash with Safari 16.4 and 16.5`
`141`		`- // https://github.com/tailwindlabs/tailwindcss/issues/17194`
`142`		`- if (value === 'currentColor') {`
`143`		- return `oklab(from currentColor l a b / ${alpha})`
`144`		`- }`
`145`		`-`
`146`	`139`	return `color-mix(in oklab, ${value} ${alpha}, transparent)`
`147`	`140`	`}`
`148`	`141`