Dark mode modifier bug when creating customized styled components

[lucasfontesgaspareto]

This code looks perfect

  export const SidebarItem = styled(Link)<SidebarItemProps>(({ exact }) => {
    return [
      tw`flex items-center p-2 text-base font-normal rounded-lg text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700`,
      exact && tw`bg-zinc-700`
    ]
  })

As you can see

But when i use dark: modifier a bug happens as seen in the image below

  export const SidebarItem = styled(Link)<SidebarItemProps>(({ exact }) => {
    return [
      tw`flex items-center p-2 text-base font-normal rounded-lg text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700`,
      exact && tw`dark:bg-zinc-700`
    ]
  })

it doesn't make much sense to me because as I have a condition in the case where the exacts are false, I shouldn't even load the css classes into the component

For now my solution is exact && tw`bg-zinc-500 bg-opacity-20` but this is clearly a bug right?

My versions: "tailwindcss": "^3.1.8" "twin.macro": "^3.0.0-rc.3"

[ben-rogerson]

Are you using styled components? This sounds like the dark mode pinned issue - could you please confirm?

[lucasfontesgaspareto]

Exactly the same

[ben-rogerson]

Thanks for reporting back but nothing I can do from my end I'm afraid. Closing this issue as it's a duplicate of #310