Revert "Don't use color-mix(…) on currentColor (#17247)" and work around Preflight crash

[philipp-spiess]

Closes #17194.

This reverts commit d6d913e.

The initial fix does breaks older versions of Chrome (where text won't render with a color for the placeholder at all anymore) and the usage of the relative colors features also means it'll require a much newer version of Safari/Firefox/Chrome to work correctly. The implementation was also wrong as it always set alpha to the specific percent instead of applying it additively (note that this can be fixed with calc(alpha * opacity) though).

Instead we decided to fix this by adding a @supports query to Preflight that only targets browsers that aren't affected by the crash. We currently use the following workaround:

/*  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not  crash when using `color-mix(…)` with `currentColor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194) */ @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentColor 50%, transparent); } }

Test plan

When testing the color-mix(currentColor) vs oklab(from currentColor …) we created the following support matrix. I'm extending it with our fix which is the fix ended up using:

Browser	Version	color-mix(… currentColor …)	oklab(from currentColor …)	@supports { color-mix(…) }
Chrome	111	❌	❌	❌
Chrome	116	✅	❌	✅
Chrome	131+	✅	✅	✅
Safari	16.4	💥	❌	❌
Safari	16.6+	✅	❌	❌
Safari	18+	✅	✅	✅
Firefox	128	✅	❌	✅
Firefox	133	✅	✅	✅

Note that on Safari 16, this change makes it so that the browser does not crash yet it still won't work either. That's because now the browser will fall back to the default placeholder color instead. We used the following play to test the fix: https://play.tailwindcss.com/RF1RYbZLKY