Become a member
to unlock all features

Create egghead account to access 1,000+ tutorials and resources from expert developers.

Create account

    Make a Tailwind Styled Dropdown Interactive


    The dropdown looks great but right now it's completely static - it's stuck in an open position. For it to be complete, we'll want to be able to toggle it open and closed.

    To do that, we'll add some Vue specific that will track an isOpen variable in the component state that we'll use to open and close the dropdown. After that we'll hook up a click handler to the button to do just that, close and open the dropdown.

    Once that is done, we'll handle the case where a user clicks outside of the dropdown to close it as well as add a keyboard accessible variant to close the dropdown