Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom.

[MuhammadKhizar7]

Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom.

This error cause and also flicker when using tabs when using this module and also when using raw headless UI module

If we wrap client only

 <ClientOnly>
  <TabGroup>
    .....
  </TabGroup>
</ClientOnly

or use transpile in config

  build: {
     transpile: ['@headlessui/vue'],
   },

but flicker effect remain same it because of client rendering

[P4sca1]

Please report issues of Headless UI itself on their GitHub repository: https://github.com/tailwindlabs/headlessui

The following issue might be related: tailwindlabs/headlessui#1479