"I am using the text clamp property in Tailwind CSS, but it doesn't seem to be working. [font-size:_clamp(2.625rem, 0.6648rem + 5.2273vw, 6.9375rem)]

Question

This clamp property I've used before in Tailwind isn't functioning as expected. I've encountered it multiple times and recall seeing it somewhere. Could the issue be caused by the "+" sign, or is it something else?

it tried [font-size:_clamp(2.625rem, 0.6648rem + 5.2273vw, 6.9375rem)] and was expecting it to work in my code but it didn't worked.

Answer 1

As per the documentation:

Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

So your class name would be

<element class="[font-size:clamp(2.625rem,0.6648rem+5.2273vw,6.9375rem)]">

Furthermore, if the fontSize core plugin is not disabled, you don't necessarily need to use an arbitrary property class. Instead, you could use an arbitrary value class:

<element class="text-[clamp(2.625rem,0.6648rem+5.2273vw,6.9375rem)]">