How can I change oklab in color-mix to use my own CSS variable?

[anmoldovanov]

Hi, is there a way to replace oklab with var(--my-variable)?

[wongjn]

@theme inline {
  --color-foo: var(--my-variable);
}

<div class="bg-foo">

Produces:

.bg-foo {
  background-color: var(--my-variable);
}

https://play.tailwindcss.com/ETfm6g4wBo

[anmoldovanov]

If I write:

bg-(--my-color)/10

I get:

.bg-\(--my-color\)\/10 {
    background-color: color-mix(in oklab, var(--my-color) 10%, transparent);
}

How can I change oklab here?

[wongjn]

Remove the /10 suffix, though you will lose the alpha modification.

[anmoldovanov]

Remove the /10 suffix, though you will lose the alpha modification.

The question is whether it is possible to change the system settings of Tailwind CSS to avoid using oklab and use my own value instead? :)

[wongjn]

Not that I can see:

1. The class name value is resolved here:
   

   tailwindcss/packages/tailwindcss/src/utilities.ts

   Line 4061 in 81de67c

   let value = resolveThemeColor(candidate, theme, ['--text-color', '--color'])

2. In the function, it resolves the color value via asColor():
   

   tailwindcss/packages/tailwindcss/src/utilities.ts

   Line 212 in 81de67c

   return value ? asColor(value, candidate.modifier, theme) : null

3. In asColor(), it resolves via withAlpha():
   

   tailwindcss/packages/tailwindcss/src/utilities.ts

   Lines 154 to 166 in 81de67c

   	// Check if the modifier exists in the `opacity` theme configuration and use
   	// that value if so.
   	let alpha = theme.resolve(modifier.value, ['--opacity'])
   	if (alpha) {
   	return withAlpha(value, alpha)
   	}
   	if (!isValidOpacityValue(modifier.value)) {
   	return null
   	}
   	// The modifier is a bare value like `50`, so convert that to `50%`.
   	return withAlpha(value, `${modifier.value}%`)

4. In withAlpha(), it's hardcoded to in oklab:
   

   tailwindcss/packages/tailwindcss/src/utilities.ts

   Line 137 in 81de67c

   return `color-mix(in oklab, ${value} ${alpha}, transparent)`

[anmoldovanov]

It would be great to have such an option because some colors can use OKLCH without bugs, and we could also change the variable to OKLCH for browsers that have fixed this issue 🙏

Thank you for your help