html-dialog-react-tailwind

Code repository for the article Taming the HTML dialog with React and TailwindCSS

Install dependencies

The component uses tailwind-merge to merge the TailwindCSS classes with the ones passed as props.

npm i tailwind-merge
# yarn add tailwind-merge
# pnpm add tailwind-merge

If you don't need this feature, you can skip installing the dependency and remove twMerge from the className prop in the Modal component.

Copy the Modal component

Run the following command to copy the Modal component to your project:

npx degit fibonacid/html-dialog-react-tailwind/src/Step3.tsx ./Modal.tsx

If you don't need the animation stuff:

npx degit fibonacid/html-dialog-react-tailwind/src/Step2.tsx ./Modal.tsx

If you don't need the TailwindCSS classes:

npx degit fibonacid/html-dialog-react-tailwind/src/Step1.tsx ./Modal.tsx