feat: [v3] add support for oklch oklab lch lab color spaces

[RyanYANG52]

Hi, currently in v3 doesn't support oklab(var(--foo) / var(--alpha)), I create this simple PR to add support for it.

Because v4 is still in beta, it would be very nice to try out some of the new color space in our current projects, before migrating to v4

[philipp-spiess]

Hey! Thanks for the PR. I'll bring it up with the team but just to set expectations I don't think it's very likely we're going to add new features to v3 at this point and rather focus our effort on getting v4 ready, I hope you understand!

Since you mentioned the v4 beta: Did you have a chance yet to try it out in your project? As you said, v4 has much better support for these wide gamut color spaces out of the box including using the color-mix() function for opacity etc.

If you're running into any issues that prevent you from upgrading, please let us know!

[RyanYANG52]

I understand, thanks for reply.
I tried v4, it's very nice, great work.

our project is very large svelte monorepo, and we currently has lots of @apply in svelte <style>, and a custom plugin for some components and theme we use, I try to migrate once, too many file to change and test because of this change #15205 and I am not sure about the our plugin's custom theme and component will be able to import by #14981

@import "tailwindcss/theme" theme(reference); /* custom theme define by js plugin */
@tailwind utilities;  /* custom componets define by js plugin */

#15045 this one may have some change behavior as well

so we decided to wait for v4 rc release, and then to find a way to upgrade

[philipp-spiess]

@RyanYANG52 Gotcha! Yeah the best practice for Svelte etc. is to not have @tailwind utilities inside the <style> block ever since it would generate a list of all utilities used by your project and that's not something you want to scope to an individual component.

To load your existing theme and plugins etc. for use with @apply we're adding a new API in the next beta release though that you might find helpful: #15228

[RyanYANG52]

nice, I will try it out once it's released.

[RobinMalfait]

Hey!

Now that Tailwind CSS v4 is out, it's unlikely we will be adding new features to v3. I would recommend to try and upgrade to v4 where this already works. We wrote an upgrade guide and included some tooling to upgrade your projects to minimize the amount of work you have to do yourself. More info: https://tailwindcss.com/docs/upgrade-guide

Since you are working with Svelte, this section of the upgrade guide will be relevant to you as well: https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules

Going to close this for now, but I do appreciate the PR!