Using the <alpha-value> of config file in TW4

[cloudrendr]

To my follow Tailwinders, please assist:

When upgrading to Tailwind 4, is it possible to use a equivalent as used in the tailwind.config file, in the definition of custom color CSS variables in the main CSS file where Tailwind is imported?

Since is a config file construct, how is it supported in TW4? Or do you need still need a config file for such cases?

Some insights will be greatly appreciated.

[wongjn]

You don't need <alpha-value> at all in v4 - it can apply alpha-channel modifications whatever the color value.

[desiprisg]

How would you do the following:
oklch(from hsla(var(--foreground) / 0.05) l c h / calc(alpha * <alpha-value>))

[RobinMalfait]

As @wongjn mentioned, you don't need it. In this case you probably just want 100%, or omit the alpha value entirely oklch(from hsla(var(--foreground) / 0.05) l c h);. If you later use text-foo/50 we will wrap this value in

color-mix(in oklab, the-color-goes-here 20%, transparent);

Here is a Tailwind Play example: https://play.tailwindcss.com/K25Yr5hGeQ?file=css
The following CSS will be generated:

.bg-foo {
  background-color: var(--color-foo);
}
.bg-foo\/50 {
  background-color: color-mix(in srgb, oklch(from hsla(var(--foreground) / 0.05) l c h) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-foo) 50%, transparent);
  }
}

[desiprisg]

This just worked: --color-accent: hsl(var(--foreground) / 0.03);
nice! I tested the wrong element by mistake and thought it wasn't. Much simpler!