How to Create a Custom CSS Color Utility with Opacity Support (Tailwind text-* Replica)

[AsadGG]

I'm attempting to create a custom CSS utility that behaves similarly to Tailwind CSS's built-in text-* classes, specifically for applying text colors.
in v3 i used match utilities

  'ion-text': (value) => ({
            '--color': withOpacity(value),
          }),

but in v4

@utility ion-text-* {
  --color: --value(--color- *);
}

This utility successfully applies the base color. However, If I try to use this utility with an opacity value (e.g., ion-text-primary/50), it fails.

i want an exact functional replica of Tailwind's text-* utility, which allows for both color application and dynamic opacity control (e.g., text-blue-500 and text-blue-500/50).

Could anyone provide guidance on how to modify this utility, Any insights into how Tailwind achieves this with its text-* utility ?

[wongjn]

As per the documentation, you'd use --modifier():

@utility ion-text-* {
  --foo: calc(--modifier(integer) * 1%);
  --color: --alpha(--value(--color- *) / var(--foo, 100%));
}

As for how Tailwind core achieves this with its text-* utility, start from here:

tailwindcss/packages/tailwindcss/src/utilities.ts

Line 4999 in ed3cecd

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

[AsadGG]

Thanks a lot! I've added [color] into the code, and it now accepts arbitrary values.

@utility ion-text-* {
  --opacity: calc(--modifier(integer) * 1%);
  --color: --alpha(--value(--color- *, [color]) / var(--opacity, 100%));
}

I'm also curious about the 'alpha' you used. I thought we should do it like this:

@utility ion-text-* {
  --opacity: calc(--modifier(integer) * 1%);
  --color: color-mix(
    in oklab,
    --value(--color- *, [color]) var(--opacity, 100%),
    transparent
  );
}

[wongjn]

--alpha() is syntatic sugar for color-mix().