Custom functional utility with color values

[jacksleight]

What's the correct way to write a custom functional utility that uses color and opacity values? I have this:

@utility overlay-* {
    border-image: linear-gradient(to top, --value(--color-*), --value(--color-*)) fill 1;
}

Which works when called with overlay-black, giving:

.overlay-black {
    border-image: linear-gradient(to top, var(--color-black), var(--color-black)) fill 1;
}

But when called with an opacity as overlay-black/50 no class is created.

[wongjn]

@utility overlay-* {
    --alpha: calc(1% * --modifier(integer));
    --color: --alpha(--value(--color-*) / var(--alpha, 100%));
    border-image: linear-gradient(to top, var(--color), var(--color)) fill 1;
}

--modifier() is where the value after the slash. If there is no slash, the declaration is removed.
--alpha() is Tailwind syntax sugar for color-mix().

https://play.tailwindcss.com/BAEVBTPuJc

[jacksleight]

Amazing, thank you!