Colors opacity support in custom utility class

[itsJohnnyGrid]

Hi, I defined utility class in my main.css for the text color:

@utility text-default {
    color: var(--color-gray-900);
}

However, when I try to apply opacity (e.g., text-default/50), it doesn’t work.

I’ve carefully read the docs and tried various solutions found online, but none seem to resolve the issue.

Could someone advise on how to make this work with Tailwind 4? 🙏

[wongjn]

You could consider setting a new theme value for this instead of making a custom utility:

@theme {
  --color-default: var(--color-gray-900);
  /* Or for text only: */
  --text-color-default: var(--color-gray-900);
}

Or if you still really want to create a utility, you still have to make a theme variable since only dynamic utilities can have modifiers:

@theme {
  --foo-default: var(--color-gray-900);
}

@utility text-* {
  --alpha: calc(--modifier(integer) * 1%);
  color: color-mix(in oklch, --value(--foo-*) var(--alpha, 100%), transparent);
}

[itsJohnnyGrid]

@wongjn thank you so much, you save me days of time 🙏

This is exactly what I was looking for, It works like a charm! 🙌

@theme {
  --text-color-default: var(--color-gray-900);
}

[itsJohnnyGrid]

@wongjn your solution works great for text- and border- but it seems doesn't work for bg-. Maybe you know how to leverage this to define color only for background via @theme.

@theme {
  --bg-color-default: var(--color-gray-900);
}

When I after using the class bg-default it doesn't work.

[wongjn]

The namespace for background-color is --background-color, not --bg-color.

[itsJohnnyGrid]

Thanks, it works! 🙏
Where you found the docs related to these features? 🙂

[wongjn]

There aren't any docs - I looked at the source code.