Translate using calc adding extra calc breaking intended style

[altrae]

What version of Tailwind CSS are you using?

3.4.1

What build tool (or framework if it abstracts the build tool) are you using?

StencilJS

What version of Node.js are you using?

For example: v18.20.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/70uGwb8oJB

Describe your issue

In the Tailwind Play example provided you can see that the transform class provided is -translate-y-[calc(50%-.75rem)], but the arrow it is creating is out of alignment and if you inspect the arrow you can see that Tailwind is adding another calc around the value passed calc(calc(50% - .75rem) * -1). This extra calc is causing the alignment issue. If I remove that it aligns correctly so for now I am unable to use the Tailwind class if calc is needed.

Tailwind adding extra calc wrapper:

Manually overriding Tailwind token to remove extra calc wrapper:

[adamwathan]

Hey! This is because you are using the -translate-y-[calc(50%-.75rem)] class instead of translate-y-[calc(50%-.75rem)] — the dash at the beginning is the negative modifier and tells Tailwind to multiply the value by -1.

[altrae]

Thank you, Adam! I'm so used to using top: 50%; transform: translateY(-50%); or top-1/2 -translate-y-1/2 to get the alignment correct that I assumed I needed to do the same here even though I was using calc. I'm glad this was just a misunderstanding on my part and nothing needs to be done on y'alls end. TIL :)

edit: My original thought was to translate up 50% plus the .5rem used for the border, but that didn't look visually correct so I added .25rem to make it look right. I think what I actually needed to do was translate up 50% plus half the size of my border and this logic works using the negative class as expected.