fontstailwind-cssfont-sizetailwind-elements

"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)]

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.

Solution

  • 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)]">