[v4] color error with animation-timeline

[PLManuel]

What version of Tailwind CSS are you using?

4.0.3

What build tool (or framework if it abstracts the build tool) are you using?

Astro 5.2.3

What version of Node.js are you using?

v20.12.2

What browser are you using?

[Versión 1.74.51 Chromium: 132.0.6834.160 (Build oficial) (64 bits)]

What operating system are you using?

Windows 10

Reproduction URL

https://play.tailwindcss.com/Zm9MoXD9AA

https://github.com/PLManuel/prueba-tailwind4

https://drive.google.com/file/d/1bWsExht0ENBIhqM7P3X3WVX2FqdS0Gyl/view?usp=sharing

Describe your issue

I'm making an animation between two colors and the final color of the animation doesn't match the color code. This also happens in the background. The error appeared after uninstalling tailwind 3 and installing the new version with "pnpm astro add tailwind", to move to version 4.

[PLManuel]

Explanation:
The problem is that now Tailwind 4 uses oklch for the colors and does weird things when making the animation from a color that is not in oklch.
Solution:
Put the colors in oklch
https://play.tailwindcss.com/YaT8yB0LjG
Problem:
But now if the initial color is "text-white" or "text-black" the text color transition is made to black, not to the indicated color (which is already with oklch)

[philipp-spiess]

Hey! the colors black and white actually don't use oklch in Tailwind CSS v4 but I think the issue is with the opacity modifier. This seems to be a browser-rendering bug though and doesn't even to work at all in Safari?

Nevertheless you can use arbitrary color values in this case to avoid the issue: https://play.tailwindcss.com/IpJko3Innv