Responsive styles not applied to certain slots

[neefrehman]

Describe the bug

I'm working on a modal component that uses slots, and that also uses responsive styles to ensure that all of the fullscreen styles are applied until the sm breakpoint. One piece of this, is ensuring that the hide modal button is shown when fullscreen === true or when on mobile, even when hideCloseButton === true. My understanding is that the below style object should cover this. But sadly I'm having some trouble getting this working properly.

const styles = tv(
  {
    slots: {
      modal: "absolute",
      dialog: "max-h-screen overflow-y-auto bg-white",
      closeButton: "absolute right-8 top-8 cursor-pointer text-sm text-black"
    },
    variants: {
      fullscreen: {
        true: {
          modal: "h-full w-full",
          dialog: "h-full w-full",
          closeButton: "!block"
        },
        false: {
          modal: "h-max w-max",
          dialog: "h-max w-max rounded-lg"
        }
      },
      hideCloseButton: {
        true: {
          closeButton: "hidden"
        }
      }
    }
  },
  { responsiveVariants: ["sm"] }
);

To Reproduce

Link to minimal repro here: https://codesandbox.io/s/confident-http-rvdg8c?file=/src/index.tsx

Expected behavior

The close modal button should display in the following scenarios:

1. { hideCloseButton: true, fullscreen: true }
2. { hideCloseButton: true, size: 'initial' }
3. { hideCloseButton: false | undefined, ...anyOtherProps }

The close modal button should NOT display in the following scenarios:

1. { hideCloseButton: true, size: 'md' }
2. { hideCloseButton: true, fullscreen: false | undefined }

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome, Safari
• Version: N/A

[alex-reinfoce]

Hi @neefrehman, you can try using closeButton: "block" to fix it. I don't know why using closeButton: "!block" is not working. It seems to be related to a class merging issue.

[alex-reinfoce]

Hi @mskelton, I having try to fix this issue. I obtained these class names from this test case. So, I attempted to use tailwind-merge from https://codesandbox.io/s/musing-flower-xc3vx7?file=/src/index.ts. However, I noticed that tailwind-merge was not merging class names like sm:!block !block hidden. I believe that tailwind-merge should address this. What do you think?

[mskelton]

@Alex-Programmer-Bro Yes, that seems to be a tailwind-merge issue. That said, I'm having trouble reproducing the issue as it seems to be working just fine for me.

[mskelton]

Closing due to lack of response.