2. NextJS: Create custom modal with TS and Tailwind CSS
We'll need a button to launch our custom modal, so when we click the "Open Modal" button, our custom modal should appear. <button className="rounded-md border h-10 px-4 text-white bg-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" type="button" onClick={() => setModalClose(!modalClose)} >Open Modal</button> We will create a state to manage the opening and closing of modal. By default the modal is closed. 'use client' import { useState } from 'react' ... const [modalClose, setModalClose] = useState(true); Ok, now let's create our custom modal Install a package clsx, it will help us dynamically add or remove className at run time based on state change. npm i clsx Following is modal <div></div>: {/* Modal */} <div id="custom-modal" tab-index="-1" aria-hidden="true" className=