[Dialog] Visually hidden element without hidden attribute

[nicoqh]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.18

Reproduction URL

https://codesandbox.io/p/devbox/empty-browser-glzqwd

Describe your issue

<div class="space-y-6">
    <Dialog ... />
    <Item />
    <Item />
    <Item />
</div>

Tailwind's spacing utilities don't affect hidden elements (.space-y-6 > :not([hidden]) ~ :not([hidden])). But there's an element that renders in place of <Dialog> which is visually hidden, but without a hidden attribute. The result is that a top margin is added to the first <Item>.

A solution could be to add the hidden attribute, or use aria-hidden which is even less tied to Tailwind.

[RobinMalfait]

This should be fixed by #2955, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.