Description
What version of Tailwind CSS are you using?
2.1.2
What build tool (or framework if it abstracts the build tool) are you using?
postcss: ^8.3.5, webpack: ^5.40.0, laravel-mix: ^6.0.24, @tailwindcss/jit: ^0.1.18
What version of Node.js are you using?
v14.17.1
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction repository
https://github.com/luchaos/tailwind-hidden-attribute
Describe your issue
From Tailwind CSS' code:
/**
* Make replaced elements `display: block` by default as that's
* the behavior you want almost all of the time. Inspired by
* CSS Remedy, with `svg` added as well.
*
* https://github.com/mozdevs/cssremedy/issues/14
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
This causes <iframe hidden> to be displayed (among the other elements above).
The project linked in the comment, which inspired the reset, has/had a similar issue with handling of the hidden attribute. See:
- Cater for "hidden" attribute jensimmons/cssremedy#71
- Respect the default
hiddenattribute behaviour jensimmons/cssremedy#72
It's possible to fix this simply by adding [hidden] { display: none }, yet,
this should probably be handled in Tailwind CSS itself, too? I was not able to find a reference to that particular handling of the hidden attribute in issues/code.
The problem occurred in a project I'm working on when adding a third party live chat widget. It renders an iframe with a hidden attribute initially but stayed visible at all times. In turn, the widget's event listeners weren't initialized and the close/toggle button did not work either. But that's a completely different issue.