Hidden DisclosurePanels are given display: none by tailwind's base layer #7160
Description
Provide a general summary of the issue here
I'm currently implementing Disclosure in a codebase that uses tailwind. At first, when nesting a Table element inside this disclosure, I noticed some jank related to column widths. After some investigation I found that the DisclosurePanel element implicitly had a width of 0, due to having been given display: none by tailwind's @tailwind base layer:
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}Tailwind source can be seen here, (and on the next branch it will be made !important)
To bring the behaviour closer in line with how details/summary elements work, I've had to override this manually:
/*
By default tailwind's reset will give any element with the `hidden` attribute `display: none`.
Here, we undo that default for RAC's `Disclosure` elements, so that hidden `DisclosurePanel`s
can still inherit a width, bringing them closer in behaviour to `details`/`summary` elements.
*/
[data-rac][hidden="until-found"] {
display: block;
}But, since I'm also using the tailwindcss-react-aria-components plugin, I wonder if this is something that could be handled there?
🤔 Expected Behavior?
DisclosurePanel elements should inherit their parent's width, even when hidden, as implementations in the docs do.
😯 Current Behavior
DisclosurePanel elements have no width due to tailwind's reset, leading to potentially janky animations when opening them
💁 Possible Solution
The tailwindcss-react-aria-components plugin could help undo this for DisclosurePanel elements.
🔦 Context
No response
🖥️ Steps to Reproduce
Use Disclosure in any codebase that adds tailwind's @tailwind base styles
Version
"react-aria-components": "1.4.0"
What browsers are you seeing the problem on?
Firefox, Chrome, Safari, Microsoft Edge
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response