0

I have encountered something strange while working with Tailwind, wondering if anyone understands what is going on.

I am trying to center a popupmeny under the button that opened it, like this: enter image description hereenter image description here

To do this I am positioning the menu using a translate expression:

const menuOffset = size.width / 2 - 1 + 'px'; //size.width = width of the button

className=`left-full translate-x-[calc(-75%-${menuOffset})]`

This works here where the button is 24x24px in size.

But for this button which is 32x32px, it seems like the expression is just invalid and the menu ends up like this: enter image description here enter image description here

I tried tweaking the one that works and it seems that while -75% works, -76% or -74% does not work. Why on earth is this? Does anyone know?

mTv
  • 1,074
  • 17
  • 28
  • add space between operator – Temani Afif Aug 15 '22 at 13:00
  • Nope, doesn't work. You cannot have whitespaces in calc expressions using Tailwind. Please read the question. Tailwind is an important detail. – mTv Aug 15 '22 at 13:12
  • added another duplicate: https://stackoverflow.com/questions/65976223/how-to-use-calc-in-tailwind-css – Temani Afif Aug 15 '22 at 13:13
  • Yes I have been through that question. I am using Tailwind v3+ so no need for `jit` in my config. I've tried substituting spaces with `_` as well without any luck. Seeing as I've tried all these things and actually got it to work in one very specific case, I'm assuming there is nothing wrong with the syntax – mTv Aug 15 '22 at 13:24
  • Can you remove duplicate as none of the questions you've posted can provide me with a working solution to my problem? I am suspecting that this has something to do with how Tailwind generates its classes. That it happens before my `size.width` value has been calculated. Thus making Tailwind unable to generate a class for it. If i try typing in 11px and 15px manually in my code then changing back, both of my cases suddenly work. – mTv Aug 15 '22 at 13:34
  • 1
    start by creating a working example so we can verify it's not working. You question will get closed even if not with a duplicate – Temani Afif Aug 15 '22 at 13:36
  • I solved my issue by setting the `translateX` using the style-prop of the element instead of trying to use Tailwind. Like this: `
     – mTv Aug 15 '22 at 13:57

0 Answers0