In this article we will go over how to create a confirm dialog using React and Tailwind CSS. This article will roughly go over the logic in my other article,  Creating a Confirm Dialog in React and Material UI, however this article will use Tailwind CSS.


There comes a time in every application where you want to delete something. So like every developer, you add a button, that when clicked on, deletes the resource.

Wether it’s a blog post, a shopping cart item, or disabling an account, you want to protect against unwanted button clicks.

Enter the Confirm Dialog.

Sometimes you do want to execute an action without always prompting the user with a confirm dialog, and sometimes it can be annoying always prompting them.

Hey, do you want to do this?
No, really, do you want to do this?

Sometimes, I get annoyed and tell myself, and the application. Yes! Of course I want to do the action. Why else would I have clicked on it?

However, when it comes to deleting sensitive data, such as a blog post, I would suggest adding a confirm dialog, so the user can be alerted and can back out if they accidentally clicked on it by mistake.

#javascript #web-development #react #tailwind-css

Creating a Confirm Dialog in React and Tailwind CSS
22.70 GEEK