Style an HTML dialog's backdrop with Tailwind CSS

How to style the backdrop of the HTML dialog element using Tailwind CSS

To style a native HTML dialog’s backdrop, use the backdrop: modifier introduced in Tailwind CSS 3.1.

<dialog class="backdrop:bg-black/50 backdrop:backdrop-blur-md">
	<p>Lorem ipsum dolor sit amet.</p>
</dialog>

I made a working CodePen for those curious to see how all this works.

(Using the class to add a backdrop filter to the dialog’s backdrop is a bit weird, but it works!)

Browser support for the HTML dialog element

I was surprised to see how well this relatively new dialog HTML element is supported.

At the time I’m writing these lines, the dialog element is supported by:

• Firefox 98+
• Firefox for Android 118+
• Google Chrome 37+
• Google Chrome for Android 128+
• Opera 24+
• Safari/Mobile Safari 15.4+

Check out the support chart on Can I use.

Did you like this article? Then, keep learning:

• Learn how to disable hover styles on mobile using Tailwind CSS for better UX
• Understand and leverage the Tailwind CSS forms plugin to style forms consistently
• Quick guide to add Tailwind CSS to your Laravel projects for styled UI
• Master the Tailwind CSS typography plugin for styling external content elegantly
• Deep dive into Tailwind CSS best practices to improve your front-end development workflow