Tailwind CSS Arbitrary Values Doesn't Work With Pug?

Question

I have an issue when using Tailwind CSS v3.0.18 arbitrary values in pug files. I followed this answer but it doesn't solve the issue.

Here is my pug file:

.container.mx-auto.flex.items-center.space-x-1
  .box.p-8.bg-yellow-800.text-white(class="w-1/2")
    h1.font-bold(class='text-2xl') It's normal
  .box.p-8.bg-yellow-800.text-white(class="w-[50%]")
    h1.font-bold(class='text-\[40px\]') It Doesn't Work

So, what is the correct way to apply Tailwind CSS arbitrary values in pug?