[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]);
}

[kyletcooper]

Thanks for much for your quick answers guys! --value([*]) worked perfectly.

I couldn't get --value([length]) to work for me. It gave me better support for normally arbitrary values but didn't seem to work for CSS variables. This was just with hovering over the class with Tailwind CSS IntelliSense, maybe it works in the actual build and just the extension was failing to recognize the utility class?

[wongjn]

If you want to use --value([length]), your class name would need to have the type hint:

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

https://play.tailwindcss.com/XQVoUlYqM0