Preflight display declaration for iframe, img, etc. overrides the hidden attribute

[andronocean]

What version of Tailwind CSS are you using?

3.1.8

What build tool (or framework if it abstracts the build tool) are you using?

Laravel Mix 6.0.49

What version of Node.js are you using?

v16.16.0

What browser are you using?

Verified in Chrome & Safari

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/3ETU8oj18o

Describe your issue

I discovered a funky edge-case today in the preflight styles. Preflight contains the following:

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

Unfortunately that doesn't work well if any of those elements have the hidden attribute. Browsers implement hidden with display: none, but the Tailwind preflight class has a higher specificity and so overrides it.

I was wondering about the safest way to fix this without increasing specificity in a way that could break things. What's Tailwind's browser support policy say about using :where() for this kind of thing? I'm thinking that using the following structure would be ideal, but it wouldn't work on older browsers that lack support.

iframe:not(:where([hidden])) {
  display:block;
}

[thecrypticace]

Another possible option, specificy-wise, would be to put this at the end of preflight:

[hidden] {
  display: none;
}

A single attribute selector has the same specificity as a class. That still lets utilities override when there's a hidden attribute present. And now there's no need to worry about :where() support. This would technically be a breaking change but I'm not sure how breaking honestly. Hey @adamwathan what are your thoughts on this?

[thecrypticace]

We have added the above to preflight. ✨

If you want to test it before the next release you can use our insiders build: npm install tailwindcss@insiders

[andronocean]

Perfect! Simpler and more reliable. Thanks very much 😁