Translate using calc adding extra calc breaking intended style #14471
-
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 Tailwind adding extra calc wrapper: Manually overriding Tailwind token to remove extra calc wrapper: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hey! This is because you are using the |
Beta Was this translation helpful? Give feedback.
Hey! This is because you are using the
-translate-y-[calc(50%-.75rem)]
class instead oftranslate-y-[calc(50%-.75rem)]
— the dash at the beginning is the negative modifier and tells Tailwind to multiply the value by -1.