Version 4.0 - Exponents in generated colors

[0000day]

Hi everyone.

Hopefully someone has an idea what weird stuff is happening for me..

I've got a button which looks like this:
<button class="...dark:bg-gray-100/5..."></button>

The color gray-100 is set in tailwind.config.js:

theme: {
  extend: {
    colors: {
      gray: {
        ...
        100: '#ececec',
        ...

When inspecting the button on the website I'm facing this css code:

.dark\:bg-gray-100\/5:is(.dark *) {
    background-color: oklab(94.3089% --59.6046e-9 0/.05);
}

oklab(94.3089% --59.6046e-9 0/.05) this is obviously not working for the browser.

Any ideas whats going on?

Thank you very much

[wongjn]

It's a bug with Lightning CSS (Tailwind uses it under the hood when doing production builds): parcel-bundler/lightningcss#899.

Consider updating lightningcss to v1.29.2+ to fix the issue.

[0000day]

Thanks for your quick reply! This solved it for me ♥
Have a nice day!