[hidden] attribute ignored on certain elements

[luchaos]

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 hidden attribute 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.

[adamwathan]

Good catch, fixing in #4873.

[rubencarv]

@adamwathan This seems to be an issue again in version 3.1.6.
The elements are displaying again despite setting the hidden attribute. Eg.
<audio hidden ....