Create a utility class with currentColor & opacity support.

[jonnitto]

I try to create a utility class with current color and opacity support

@utility rule-col-current {
  column-rule-color: currentColor;
  column-rule-color: --alpha(currentColor / calc(--modifier(integer) * 1%));
  column-rule-color: --alpha(currentColor / --modifier([percentage]));
}

Here's a demo:
https://play.tailwindcss.com/bsNQbZU4Pl?file=css

But it isn't working. I try so many different ways, has anyone a clue?

[RobinMalfait]

Hey! The --modifier(…) (and --value(…)) is only available in functional utilities, meaning they are defined as @utility foo-* (with the -*). The idea is that this way you accept values, without the -* it's a "static" utility.

Do you only want to have this utility available for current or for any kind of color?

For example, you could setup a column-rule-color namespace:

@theme {
  --column-rule-color-current: currentColor;
}

@utility rule-col-* {
  column-rule-color: --value(--column-rule-color-*);
  column-rule-color: --alpha(--value(--column-rule-color-*) / calc(--modifier(integer) * 1%));
  column-rule-color: --alpha(--value(--column-rule-color-*) / --modifier([percentage]));
}

This way any color in that namespace will be exposed. You can then map a name like current to the value of currentColor.

If you want to re-use the default --color-* namespace, then you can do something like this:

@theme {
  --color-current: currentColor;
}

@utility rule-col-* {
  column-rule-color: --value(--color-*);
  column-rule-color: --alpha(--value(--color-*) / calc(--modifier(integer) * 1%));
  column-rule-color: --alpha(--value(--color-*) / --modifier([percentage]));
}

If you're only interested in the current value and nothing else, then you can do something like this:

@utility rule-col-current-* {
  column-rule-color: --value(--default(currentColor));
  column-rule-color: --alpha(--value(--default(currentColor)) / calc(--modifier(integer) * 1%));
  column-rule-color: --alpha(--value(--default(currentColor)) / --modifier([percentage]));
}

The idea here is that the value is optional, so therefore you can use --default(…).

Let me know if this works for you. If your use case is a bit different, let me know and we'll get to a better solution instead.