How to implement this feature using tailwind
In the video they use MaterialUI and StyledFIrebaseUi which for some reason doesn't work now, So I'm trying to implement this sign-in flow using tailwind but I'm not sure how to do this using one modal only
4 Replies
You can use https://headlessui.com/react/dialog or https://www.radix-ui.com/docs/primitives/components/dialog Both have no styles, you can design it as you like 🤔
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Dialog – Radix UI
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
If you are asking how to create a modal style component, you likely want to look into fixed (or maybe absolute) positioning. https://tailwindcss.com/docs/position#fixed-positioning-elements
Position - Tailwind CSS
Utilities for controlling how an element is positioned in the DOM.
fixed allows an element to be positioned relative to the browser window.
these are very cool, thanks
i have created the modal, I wanted to know how to add multiple states(?) to the modal as seen in the video.
what i tried is to use a useState hook then conditionally render the sign in, which i dont think is the correct way