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

Can't style Dialog when prefixing tailwind classes with a selector #998

Closed
subeshb1 opened this issue Dec 22, 2021 · 5 comments
Closed

Can't style Dialog when prefixing tailwind classes with a selector #998

subeshb1 opened this issue Dec 22, 2021 · 5 comments

Comments

@subeshb1
Copy link

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.2

What browser are you using?

Chrome

Reproduction URL

https://github.com/subeshb1/headless-ui-issue

Describe your issue

When prefixing tailwind classes with a selector in the configuration https://tailwindcss.com/docs/configuration#important,

{
 important: '#app'
}

the Dialog component doesn't get applied with styles since it's rendered via a portal i.e outside the specified selector.

Screen.Recording.2021-12-22.at.8.51.09.AM.mov
@RobinMalfait
Copy link
Member

Hey! Thank you for your bug report!
Much appreciated! 🙏

This is because the Dialog is rendered in a Portal as a child of the document.body. This means that the #app you have here: https://github.com/subeshb1/headless-ui-issue/blob/875a8fbe932484c89459576312b28f374cf2b954/pages/index.tsx#L8 will be a sibling of the Dialog content and not a child.

If possible, I would move the #app to the <body>.

@subeshb1
Copy link
Author

subeshb1 commented Feb 10, 2022 •
edited
Loading

@RobinMalfait Thank you for the response.

It's not possible to move the styling to the body.

We are using micro frontends, where each instance uses a different tailwind prefix to prevent class collision due to CSS precedence.

A hack that I used was to add the #app to the Portal container itself.

@pfcodes
Copy link

pfcodes commented Apr 19, 2022 •
edited
Loading

Please reopen this. I need this functionality as well. I'm exporting a package to be used in an existing project and the tailwind classes need to be scoped. Dialog not allowing me to use my own portal is causing issues.

Also there's a discussion related to this here: #666

@theomessin
Copy link
Contributor

2 years since #666 and headlessui still doesn't support this basic functionality...

@gabrieloureiro
Copy link

Screenshot 2023-06-20 at 12 14 31

Screenshot 2023-06-20 at 12 13 54

Screenshot 2023-06-20 at 12 14 50

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
5 participants
@RobinMalfait @theomessin @pfcodes @subeshb1 @gabrieloureiro