Does the Dropdown example properly work?

[cinjon]

After setting up tailwind to work with react (as instructed in the create-react-app setup), I ran into an issue where the Dropdown doesn't work with active as long as the relative positioning is set in <Menu as="div" className="relative inline-block text-left">. However, disabling off relative messes up the page.

Am I missing a setting? The SO answers to similar questions suggest there may be something to do in the tailwind config.

[NovusOpus]

Did you installed headlessUI since it's a dependency for those examples as you can see in this line of code:
import { Menu, Transition } from '@headlessui/react'

Also there's plenty of examples in headlessUI Demos page with their respective code for react, you can try them and play around with them.

Also if you need more guidance here's a Youtube Video Tutorial from Tailwind CSS Team that covers menus with React, Tailwind CSS and HeadlessUI

[cinjon]

Yes, I did that. That's how I'm using the Menu import to do <Menu as="div"....

I realized I didn't make it clear in the original post, but I'm saying that the example on the tailwind website does not work because of this --> https://tailwindui.com/components/application-ui/elements/dropdowns.

[olets]

Are you looking at one of the examples marked png preview?

[minahpro]

For ReactJS, I always use opacity-0 invisible and opacity-100 visible with transition-all duration-200 to get the best and nicest transition dropdown
read this