--duration function

[cbkmutlu]

Hey,
The document says;
Use the --spacing() function to generate a spacing value based on your theme:

https://tailwindcss.com/docs/theme#default-theme-variable-reference

min-height: --spacing(--value(integer)));

So need duration function.

animation-duration: --duration(--value(integer));

[rozsazoltan]

The --spacing only shortens a calculation. Specifically, because there are a lot of characters involved here, and the availability of var(--spacing) isn't all that obvious at first glance.

// input
min-height: --spacing(--value(integer));

// output (utility-5)
min-height: calc(var(--spacing) * 5);

// input
max-height: calc(var(--spacing) * --value(integer));

// output (utility-5)
max-height: calc(var(--spacing) * 5);

In the case of duration, I think it's clear that the number has to be multiplied by 1s. So you can use calc:

// input
animation-duration: calc(1s * --value(integer));

// output (utility-5)
animation-duration: calc(1s * 5);

• https://play.tailwindcss.com/nQ8JLm2Co2?file=css

[cbkmutlu]

Thats a nice trick but not a solid solution (e.g. auto compoletion)