Utility with multiple arguments possible? @utility foo-*-*

[decipher-cs]

@utility grid-cols-fill-*-* {
   grid-template-columns: repeat(
         auto-fill, 
         minmax(--value([length]), --value([length]))
      );
}

I know this is not valid CSS, but what would be the equivalent, if any? I want a way so that I can pass a min as well as a max to my function.

From what I understand after reading the docs, it's not possible. Is there a workaround or perhaps this is not a recommended practice to begin with?

[wongjn]

At most, utilties can be passed a value and a modifier, so two values. Though here, I wouldn't really categorize one of the "arguments" in this case to be a value or modifier. This is because both the minimum and maximum values both have equal "importance".

Instead, I'd do what Tailwind core does and have the values split over several class names and "compose" them together. This is what the gradient utilities do as an example.

So, perhaps do:

@utility grid-cols-fill-min-* {
  --grid-min: --spacing(--value(integer));
  --grid-min: --value([length]);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), var(--grid-max)));
}

@utility grid-cols-fill-max-* {
  --grid-max: --spacing(--value(integer));
  --grid-max: --value([length]);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), var(--grid-max)));
}

Then you could do:

<div class="grid grid-cols-fill-min-20 grid-cols-fill-max-[500px]">