Hidden DisclosurePanels are given display: none by tailwind's base layer

[neefrehman]

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

[devongovett]

Thanks for reporting! I reached out to the Tailwind team about this and they are looking into updating their reset. See tailwindlabs/tailwindcss#14625

[RobinMalfait]

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.

[RobinMalfait]

Hi! Quick update, this has been released in the latest v3 version and the latest v4 alpha release.

• npm install tailwindcss@latest — https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.14
• npm install tailwindcss@next — https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0-alpha.27