tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

Add `:popover-open` variant

Open lukewarlow opened this issue 7 months ago • 4 comments

:popover-open is used to style elements with the popover attribute when they're open.

This is supported in Chromium 114, Safari 17, and Firefox 122.

lukewarlow avatar Oct 05 '23 21:10 lukewarlow

I can see that all major browsers will soon support this now (caniuse). It's behind a feature flag in FF and is currently being tested in Safari TP.

I think it could be a great idea to get this in soon so it's ready for release. Popovers are a great new addition to the web platform, and it would be awesome to add support for pseudos like this to be able to take advantage of such new features in Tailwind CSS.

Thanks, @lukewarlow! Fan of this 🙌🏼

brandonmcconnell avatar Oct 12 '23 02:10 brandonmcconnell

Just a minor correction it's actually in Safari 17, MDN is incorrect.

lukewarlow avatar Oct 12 '23 09:10 lukewarlow

Weird, my computer isn't letting me update to Safari 17, so I figured it was still in TP, but maybe it's live?

brandonmcconnell avatar Oct 12 '23 19:10 brandonmcconnell

Safari 17 is definitely available. Has been for a little over 2 weeks. Works on Monterey, Ventura, and Sonoma but I'd imagine only if you're on the latest version of each. Make sure you're updated? Also I'd verify that you don't have a beta development profile (or in later macOS versions have beta updates enabled in Settings)

thecrypticace avatar Oct 12 '23 19:10 thecrypticace

This should be up to date with latest master now (have rebased). Let me know if there's anything else I should do.

lukewarlow avatar Mar 05 '24 13:03 lukewarlow

Thanks for this! Going to target v4 with this one instead, have opened a new PR and added you as a co-author here:

https://github.com/tailwindlabs/tailwindcss/pull/13331

adamwathan avatar Mar 22 '24 19:03 adamwathan