Using vars as params to custom utility functions

[hyperknot]

I have a custom utility function like this:

@utility px-scrollbar-* {
  --_pad: --value([length]);
  --_pad: calc(--value(integer) * 1px);

  padding-left: var(--_pad);
  padding-right: calc(var(--_pad) - var(--detected-scrollbar-width));
}

My problem is that I cannot use it with CSS vars, using the "short" syntax, like ml below. I can only use it in this long and ugly syntax with an added calc/var hack.

Is this by definition, or I'm missing something? Would it be possible to have a utility function which works like px-scrollbar-(--chat-column-margin)?

ml-(--chat-column-margin) px-scrollbar-[calc(var(--chat-column-margin))]

[wongjn]

You'd need to type-hint the CSS variable to match the [length] like px-scrollbar-(length:--chat-column-margin): https://play.tailwindcss.com/sb5sGoAikP.
Otherwise, if you don't want to need to type-hint, you'd need to change the arbitrary value type to [*]: https://play.tailwindcss.com/w38FjapPu9

[hyperknot]

Thank you. In the * case, how does [*] and integer mix and match? Do I understand correctly that it does this type logic at compile time and generates a different CSS based on if it was called with -[4px] or -1?

[wongjn]

Tailwind indeed does this type logic at compile time and generates a different CSS based on if it was called with -[4px] or -1. For example for px-scrollbar-1, the suffix is 1 which is a "bare value" integer value. This matches --value(integer). px-scrollbar-[4px] has [4px] which is an arbitrary value and thus would match --value([*]).