Closed
Description
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.
Metadata
Metadata
Assignees
Labels
No labels