[v4] Ability to fallback to hex colors.

[neonelemental]

I've read a few issues where it seems pretty clear that library is trying to put an aggressive foot forward towards the future by using oklch colors. I agree, it's a great concept and I think that it makes sense from that perspective.

The flip side is that I spent most of my day yesterday trying to identify a display bug in Chrome (latest) which caused background colors to show multiple tints when an SVG was present on the page.

Now, I know this is not really a Tailwind bug, in the sense that Chrome does not really support oklch in a bug-free manner. However, the discussions I read suggested: Just use the mappings from Tailwind 3. So I did that, and it did solve my display bug in Chrome, but the code rubbed me the wrong way. Here's a snippet:

@theme {
    --color-slate-950: #020617;
     --color-fuchsia-300: #f0abfc;
    // and many more because I'm using other colors ...
}

@theme {
  --color-primary: var(--color-slate-900);
  --color-accent: var(--color-fuchsia-300);
}

@layer base {
  [data-theme='dark'] {
    --color-primary: var(--color-slate-900);
    --color-accent: var(--color-fuchsia-300);
  }

  [data-theme='light'] {
    --color-primary: var(--color-fuchsia-300);
    --color-accent: var(--color-slate-900);
  }
}

My request is an either-or here:

1. Can there be some sort of guide for users who want to upgrade their library but have support for browsers that do not implement oklch or for browsers (like Chrome) that support oklch but not in a bug free manner? I had to dig through the closed issues to find someone else that had an issue with oklch, and from that I deduced that there was a recommended "solution" which is the code I posted above.

2. Can we have a fallback API instead? For example, I'd much prefer to do this:

  // completely drop the copy-paste of my Tailwind 3 mappings because that's a subpar solution to push into user repos.

  [data-theme='light'] {
    --color-primary: theme('color.hex.slate-950');
    --color-accent: theme('color.hex.fuchsia-300');
  }

I would much prefer to use the tailwind APIs to reference theme variables than to start spraying var(--the-var) all over my spreadsheet.

[neonelemental]

Also this might just be a bug, but I tried to use the theme API after replacing the definitions for the colors but the bug persisted so I switched to var which seemed to do the correct thing (e.g. using the hex code rather than the oklch mapping).

[raulreyes]

Before Tailwind CSS v4, we used tailwind.config.js, where you could set up your OKLCH colors. With the help of postcss.config.js and the @csstools/postcss-oklab-function plugin, fallback hex colors were automatically generated. Now, with CSS variables, achieving this has become much more difficult for me, I have not being able to find a solution. I hope we find a more reliable solution rather than relying on a manual setup.