[hidden] attribute not considered for display classes

[andershagbard]

What version of Tailwind CSS are you using?

For example: v3.2.4

Reproduction URL
https://play.tailwindcss.com/n31IueX1YJ

Describe your issue

This seems like a quite common issue, but I could not find any talks or issues about this.

I would expect display classes block, inline, flex etc. to remain hidden, if an element has a [hidden] attribute.

Correcting this would be a somewhat breaking change.

[reinink]

Hey! So a few months ago we updated Preflight (our CSS reset) to make sure that elements with the hidden attribute stay hidden by default (see #9979). However, I'm not sure it makes sense to do more than that, as the behavior in Tailwind is now consistent with how the browser works by default:

<!-- This element is hidden -->
<div hidden>I am hidden</div>

<!-- This element is not hidden because we're explicitly making it not using an inline style -->
<div style="display: block" hidden>I am not hidden</div>

This behavior is nice because hidden elements are hidden by default, but you're able to override this if necessary using Tailwind display utility classes.

Given that, and the fact that this would be a breaking change, I think it's best that we leave things how they are right now.

That said, if you'd like to force all elements with the hidden attribute to always be hidden, you could add the following CSS to your project:

[hidden] {
  display: none !important;
}

I hope that helps!

[andershagbard]

Makes sense.

I've solved it by doing the following:

...

plugins: [
  plugin(({ addUtilities }) => {
    addUtilities({
      '.block:not([hidden])': { display: 'block' },
      '.inline-block:not([hidden])': { display: 'inline-block' },
      '.inline:not([hidden])': { display: 'inline' },
      '.flex:not([hidden])': { display: 'flex' },
      '.inline-flex:not([hidden])': { display: 'inline-flex' },
      '.table:not([hidden])': { display: 'table' },
      '.inline-table:not([hidden])': { display: 'inline-table' },
      '.table-caption:not([hidden])': { display: 'table-caption' },
      '.table-cell:not([hidden])': { display: 'table-cell' },
      '.table-column:not([hidden])': { display: 'table-column' },
      '.table-column-group:not([hidden])': { display: 'table-column-group' },
      '.table-footer-group:not([hidden])': { display: 'table-footer-group' },
      '.table-header-group:not([hidden])': { display: 'table-header-group' },
      '.table-row-group:not([hidden])': { display: 'table-row-group' },
      '.table-row:not([hidden])': { display: 'table-row' },
      '.flow-root:not([hidden])': { display: 'flow-root' },
      '.grid:not([hidden])': { display: 'grid' },
      '.inline-grid:not([hidden])': { display: 'inline-grid' },
      '.contents:not([hidden])': { display: 'contents' },
      '.list-item:not([hidden])': { display: 'list-item' },
      '.hidden:not([hidden])': { display: 'none' },
    });
  }),
],

corePlugins: {
  display: false,
},

...

[proimage]

My solution is simply to re-position the [hidden] styling last (overriding what comes before), and outside of any @layer directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base
{
	@import './base/vars.scss';
	/* etc. */ 
}

@layer components
{
	@import './components/buttons.scss';
	/* etc. */ 
}

@layer utilities { }

[hidden] {
	display: none;
}

Advantages:

1. It avoids the need for !important, which are annoying to override.
2. It retains the same selector and specificity as the browser's default styles for [hidden].
3. It can still be overridden by inline styles (but don't do that).
4. It can have whatever Tailwind display style you want it to have, without concern that the styling will make it show up when it still has the hidden attribute.

Possible disadvantages:

1. You cannot override the hidden attribute with Tailwind classes—although IMO this is actually desirable behavior.

And when you want the element to actually appear, both to sighted users and to screen readers, you simply remove the hidden attribute through whatever JS interaction you want—as intended.

Side note: IMO, anyone "overriding" an element with the hidden attribute on it simply by giving it a TW display class, without removing the hidden attribute, is asking for trouble down the line (it's like making a <div> clickable—possible, but bad practice... just use <button> for Pete's sake...).