Taming the HTML dialog with React and TailwindCSS

Today we are going to build a modal component using the native HTML <dialog> element with React and TailwindCSS.

Step 1: Wrap the HTML dialog element

The HTML dialog is a bit tricky to work with, therefore is a good practice to create a wrapper that will give us a declarative API to work with.

Let's start by simply wrapping the element and passing all the props to it:

// Modal.tsx    
import { ComponentPropsWithoutRef } from 'react'; …

a11y api build good html javascript practice react tailwindcss work wrapper