Weird tailwind class name injection in V2

[Prateekrajput1999]

Hey, i am using headlessui/react in my project along with tailwind css

I was using a if else logical method to inject css in my DialogPanel but it was showing a weird issue

const getClass = () => {
    if (size === "sm") {
      return "sm:max-w-lg"
    } else if (size === "md") {
      return "sm:max-w-xl"
    } else if (size === "xmd") {
      return "max-w-[570px] md:max-w-[600px] lg:max-w-[600px] xl:max-w-[613px]"
    }

    return "sm:max-w-5xl"
  }

using above method of getClass function i saw sm:max-w-5xl, sm:max-w-lg and sm:max-w-xl all three in className even
though only one of them should go....i verified the logic as well it was working absolutely fine so i conclude there was some issue with class injection in DialogPanel

To Find an alternative solution to this i used inline style injection in DialogPanel component like below and it worked

  const getStyle = () => {
    if (size === "sm") {
      return { maxWidth: "32rem" }
    } else if (size === "md") {
      return { maxWidth: "36rem" }
    } else if (size === "xmd") {
      return {
        maxWidth: "570px",
        "@media (min-width: 768px)": { maxWidth: "600px" },
        "@media (min-width: 1024px)": { maxWidth: "600px" },
        "@media (min-width: 1280px)": { maxWidth: "613px" },
      }
    }

    return { maxWidth: "64rem" }
  }

can any one rectify this issue ?

I am using 2.0.3 version of @headlessui/react

I am using chrome browse