Open neefrehman opened 2 days ago
Thanks for reporting! I reached out to the Tailwind team about this and they are looking into updating their reset. See https://github.com/tailwindlabs/tailwindcss/pull/14625
This should be fixed and will be available in the next release of Tailwind CSS. Will leave a comment when we have a new version out.
Provide a general summary of the issue here
I'm currently implementing
Disclosure
in a codebase that uses tailwind. At first, when nesting aTable
element inside this disclosure, I noticed some jank related to column widths. After some investigation I found that theDisclosurePanel
element implicitly had a width of0
, due to having been givendisplay: none
by tailwind's@tailwind base
layer: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: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 forDisclosurePanel
elements.๐ฆ Context
No response
๐ฅ๏ธ Steps to Reproduce
Use
Disclosure
in any codebase that adds tailwind's@tailwind base
stylesVersion
"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