Tailwind CSS: Use CSS variable as arbitrary value for font size?

Question

Using Tailwind CSS, I know it is possible to use px and rem values as arbitrary values to set an element's font size:

text-[6.9rem]
text-[420px]

But is there a way to use CSS variables as arbitrary font size values? Using a variable in place of a px or rem value to set the font size does not seem to work, as the resulting class sets the element's color i.o. its font size:

text-[var(--custom-size-a)]
text-[var(--custom-size-b)]

Answer 1

When using a CSS variable as an arbitrary value, wrapping your variable in var(...) isn’t needed — just providing the actual variable name is enough:

text-[--custom-size-a]
text-[--custom-size-b]

<!-- Will generate a font-size utility -->
<div class="text-[length:--my-var]">...</div>

<!-- Will generate a color utility -->
<div class="text-[color:--my-var]">...</div>

tailwind arbitrary values