Get your next remote job on LaraJobs.
CSS Tailwind CSS

Style an HTML dialog's backdrop with Tailwind CSS

Benjamin Crozat
Published on Nov 2, 2023 0 comments Edit on GitHub
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.

Wait, there's more!

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -