TailwindUI Components slightly broken | Astro Lounge | Page 1

elfin sparrow Nov 30, 2022, 11:12 PM

#

When I try to use TailwindUI prebuilt pages by simply pasting the HTML into an astro component, then the website looks as expected on lg-screen devices, but on mobiles the nav bar is bricked and always shows. The close button does not work.
Is this a previously known issue?

#

This is what it looks like

wheat rapids Nov 30, 2022, 11:52 PM

#

Does the tailwindui component have any script tag?

elfin sparrow Nov 30, 2022, 11:55 PM

#

There are no script tags anywhere in the project

wheat rapids Nov 30, 2022, 11:56 PM

#

The navbar uses checkbox?

elfin sparrow Dec 1, 2022, 12:02 AM

#

Hmm it seems that it might be that the HTML-only navbar is not fully functional

wheat rapids Dec 1, 2022, 12:06 AM

#

What is supposed to toggle the navbar visibility?

#

HTML-only navbar
In that case, no checkbox, no interactivity

elfin sparrow Dec 1, 2022, 12:20 AM

#

yeah thats what I found

#

Is headlessui even supported in astro?

#

It seems that for example for simple Components like Popovers, when using the following code

<Popover className="relative">
      <Popover.Button>Solutions</Popover.Button>

      <Popover.Panel className="absolute z-10">
        <div className="grid grid-cols-2">
          <a href="/analytics">Analytics</a>
          <a href="/engagement">Engagement</a>
          <a href="/security">Security</a>
          <a href="/integrations">Integrations</a>
        </div>

        <img src="/solutions.jpg" alt="" />
      </Popover.Panel>
    </Popover>```

it will just error out because `<Popover.Button /> is missing a parent <Popover /> component.
`

#TailwindUI Components slightly broken