Hidden 1px button break layout

[Intaria]

If some of headlessui componens (that created this button) placed inside container with flex space-* classes, then first element will be hidden button, and all others will get margin:

Code example: https://codesandbox.io/s/loving-water-5s30ee

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Aha, good catch. The issue is that you are using a very old version of Tailwind CSS, in fact you are referencing the Tailwind UI bundled version (https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css). This is not necessary anymore, more on this topic here:

• https://tailwindui.com/changes-for-v2#tailwind-ui-for-tailwind-css-v2
• https://tailwindui.com/documentation

The issue with that version is that it is defining the space-y- utilities as:

.space-y-10 > :not(template) ~ :not(template) {}

Whereas the newest Tailwind CSS is using this instead:

.space-y-10 > :not([hidden]) ~ :not([hidden]) {}

This is where we check for the hidden attribute instead. Now, for Headless UI, the hidden button is there to capture focus and forward it to a Tab if they are not immediately ready yet (some implementation details). But because of this reason we can't use the hidden attribute because it will not be able to receive the focus.

That said this is an implementation detail and shouldn't cause issues so a fix will be ready in #1493

Either way, in both cases I would recommend you to use gap-10 or gap-y-10 instead of the space-xxx utilities instead because they use the native gap property which is pretty well supported these days and is not a "hack" with margins.

So some action points for you:

• Update to use the latest Tailwind CSS version
• Use the insiders build once Only render the FocusSentinel if required in the Tabs component #1493 is merged
• Use the gap utilities, which should already fix your issue right now