Arbituray Value using Clamp() doesn't work if there is a negative value

[rexsoi]

What version of Tailwind CSS are you using?
v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?
postcss 8.4.31, postcss-cli 10.1.0, webpack 5.89.0

What version of Node.js are you using?
v16.14.0

What browser are you using?
Chrome 118.0.5993.118

What operating system are you using?
Windows 10

Reproduction URL
Can't provide URL of the project. But it can be replicated on TailwindPlay
https://play.tailwindcss.com/BuKHeMD2uv
on Line 18 mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)]

I'm Using this Font-size Clamp Generator.
Screenshot of Configuration: https://snipboard.io/zXFA3o.jpg

Describe your issue
mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)]
It add space to "-"
Screenshot: https://snipboard.io/SEMTQZ.jpg

[alex-krasikau]

Hey @rexsoi!

I noticed that the example you shared contains incorrect CSS. If you want to perform computations within the clamp function, wrap it with calc:
mt-[clamp(0.25rem,-0.6731rem+4.1026vw,4.25rem)] => mt-[clamp(0.25rem,calc(-0.6731rem+4.1026vw),4.25rem)]

[thecrypticace]

@alex-krasikau Nah, that's not true (it may have been in the past though? — I don't recall). Any math function in CSS supports expressions. Though, you can use calc() as a workaround for the errant space.

Ex: https://play.tailwindcss.com/zohf7KMMmg

[thecrypticace]

This should be fixed by #12324, and will be available in the next release.

You can try it by using our insiders build — it may take about 15min to build & publish:

npm install tailwindcss@insiders

[rexsoi]

Thank you, @alex-krasikau and @thecrypticace for the workaround and examples.

I remember it was working before.
the custom property and style attributes are new to me. where can find these in documentation?
Thanks.