0

I have this element

<div className="relative w-8 h-24 bg-[#edeef0]">
  <div className={`absolute bottom-0 w-full h-[${Math.round((value.rank / 32) * 100)}%] bg-[#008E97]`}>
  </div>
</div>

The Math.round function returns a value between 0-100 and I have checked in dev tools that the class name being passed is correct. Example: h-[43%] or h-[32%]. However, the height attribute is not being applied to the element. If I hardcode in the height, like h-[54%], it works correctly. Does anyone know why this is not working?

HTML in Chrome Dev Tools

ZachSal
  • 43
  • 5
  • 1
    You cannot construct class name dynamically with tailwindcss https://tailwindcss.com/docs/content-configuration#dynamic-class-names I would recommend you to use `style` attribute – Clément Baconnier Aug 25 '23 at 21:11

0 Answers0