Using custom properties from libraries like thumbClassName doesn't style properly?

[deadcoder0904]

I am using react-slider & it uses thumbClassName like:

<ReactSlider
  step={1}
  min={0}
  max={1000000000}
  className="w-1/2 h-8 pr-2 mx-8 mt-4 rounded-md bg-blue-gray-700 cursor-grab"
  thumbClassName="absolute w-12 h-12 cursor-[grab] rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-blue-gray-700 -top-1 bg-gradient-to-b from-indigo-700 bg-blue-gray-900 focus:ring-indigo-500 focus:border-indigo-500"
  ariaLabel={['Min Price', 'Max Price']}
  value={price}
  onChange={(price) => {
    setPrice(price)
  }}
/>

I was confused as to why some px-values & some w-values were not working. How do I make sure it works?

Currently, w-12 h-12 isn't working because its used only inside thumbClassName. But if I put w-8 h-8 then it works as its used elsewhere in className.

[simonswiss]

Hey!

Are you able to share your code on a repo/minimal example?

[deadcoder0904]

I switched off the JIT mode & then switched it ON back again & it started working. There is a subtle bug in JIT I think as it wasn't just thumbClassName that wasn't working.

In some cases, even some properties in className were not working. Like w-8 used to work but other values w-12 & w-16 weren't working.

It's impossible to reproduce such a weird bug.