You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
The text was updated successfully, but these errors were encountered:
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?
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:
Unfortunately that doesn't work well if any of those elements have the
hidden
attribute. Browsers implementhidden
withdisplay: 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.The text was updated successfully, but these errors were encountered: