Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tailwind config important:true breaks react aria modal styling #7320

Open
dannybucks opened this issue Nov 5, 2024 · 0 comments
Open

tailwind config important:true breaks react aria modal styling #7320

dannybucks opened this issue Nov 5, 2024 · 0 comments

Comments

@dannybucks
Copy link

Provide a general summary of the issue here

Tailwind styles are not working with react aria modal if either the imortant flag of tailwind config is set to any value or the id='root' is not set to the body tag in index.html but to one of the children of the body tag.

🤔 Expected Behavior?

The tailwind styles should be applied independently from the tailwind config important flag or where the id='root' is put.

😯 Current Behavior

React Aria modal adds the div for the modal inside the body tag, but outside of the element marked with id='root'. if the tailwind config is set to important: '#root', the tailwind styles are not applied to the modal, so the modal AND it's content are not styled at all. If I move the id='root' to the body tag, everything works fine. If I remove important: '#root' from the tailwind config, everything works fine.

In my index.html:

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
 </body>

In my tailwind config:

export default {
  important: '#root',

  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: { ... }
}

Usage of react aria modal:

const ReactAriaModal: React.FC<Props> = (props) => {
  const { dialogContent: Content, icon: Icon, iconClassName } = props;
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <IconButton type="button" onClick={() => setIsOpen(true)} className="text" icon={Icon} iconClassName={iconClassName} />
      <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
        <ModalOverlay className="fixed top-0 left-0 w-screen h-screen bg-grey-400/50 flex items-center justify-center content-center z-[10000]">
          <Modal
            className={({ isEntering, isExiting }) =>
              classNames(
                'mx-2 w-[59.75rem] lg:w-[61.25rem]',
                'border-solid border-[1px] border-grey-500 drop-shadow-navLight',
                'bg-white rounded-df',
                isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : '',
                isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''
              )
            }
          >
            <Dialog className="m-2 lg:m-5">{({ close }) => <Content close={close} />}</Dialog>
          </Modal>
        </ModalOverlay>
      </DialogTrigger>
    </>
  );
};

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Just add important: '#root' to your tailwind config and have index.html in this manner:

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

Version

1.4.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dannybucks