[v4] How to support arbitrary CSS variables in custom utilties?

[kyletcooper]

Is there a way to support the (--my-variable) arbitrary syntax when creating you're own custom utilities to allow CSS variables?

@utility my-utility-* { property: --value([variable]); }

.my-utility-\(--css-variable\){ property: var(--css-variable); }

[wongjn]

Yep! Use the wildcard (*) arbitrary value type in --value() and it should work:

@utility my-utility-* {
  property: --value([*]);
}

Otherwise, if you only want to allow a specific type, you can do so, but your class names would need to have the hint too:

@utility my-utility-* {
  property: --value([length]);
}

<div class="my-utility-(length:--css-variable)">

https://play.tailwindcss.com/XQVoUlYqM0

[MuhammadOwais-SE]

Yes, Using the wildcard * in --value() allows any CSS variable to be used, e.g.:

@utility my-utility-* {
  property: --value([*]);
}

Then in HTML:

<div class="my-utility-(--my-variable)">
  ...
</div>

Moreover, If you want stricter typing, you can replace * with a specific type, e.g., [length]:

@utility my-utility-* {
  property: --value([length]);
}