v4 preflight adds !important on [hidden] attribute, unexpectedly preventing override

[paulcretu]

What version of Tailwind CSS are you using?

4.1.11, but this issue starts with 4.0.0

Reproduction URL

v3: https://play.tailwindcss.com/7MMKJJ0T6Q
v4: https://play.tailwindcss.com/0QjlBGDRWo

Describe your issue

In v4, the hidden attribute can't be overridden anymore because the preflight now uses !important:

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

Where v3 didn't use it:

[hidden]:where(:not([hidden="until-found"])) {
  display: none;  /* No !important */
}

This breaks existing patterns where you could override hidden with:

• Utility classes like class="block"
• Inline styles like style="display: block"
• Javascript that sets display styles

Standards indicate that hidden should be overridable:

From MDN:

Changing the value of the CSS display property on a hidden element will override the hidden state. For instance, elements styled display: block will be displayed despite the hidden attribute's presence

From the HTML spec:

Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the Hidden state

I found this was already mentioned as a problem in a related but distinct issue with hidden, but I couldn't find any open issue for this behavior specifically.

Looking back, this was actually discussed in #9979 where the v3 decision was to allow the hidden attribute to be overridden.

But v4 seems to have reversed this decision?

I tried to find documentation about this change but couldn't find any mention of it in the upgrade guide. I traced it back to commit a68de1d.

Tags before v4.0.0-alpha.22 aren't available, but looking at NPM, the change happened between 0.0.0-oxide.3 and 0.0.0-oxide.4

Is this intentional? I think there's a good case to be made that !important should be removed from preflight, but even if the decision is to leave it in, at least this should be documented as a breaking change in v4

[thecrypticace]

Hey! This was an indeed an intentional change. The idea is that you must remove the hidden attribute on an element if it's not meant to actually be hidden.

I've opened a PR to update the documentation: tailwindlabs/tailwindcss.com#2321

[paulcretu]

Thanks for the response @thecrypticace! I appreciate the documentation PR clarifying this was intentional, but I'd also like to make a case for removing !important altogether:

1. The change seems to have mostly downsides, introducing non-standard behavior that creates inconsistency between Tailwind and vanilla HTML/CSS.
2. It breaks existing code and has real world impact. For example, I found this problem because I'm using Phoenix LiveView, which comes with a JS.show() utility function. To work correctly with Tailwind 4's opinion, the framework now needs special logic to check for hidden attribute and remove it, or add !important to their styles (my next step is to open an issue there…)
3. I haven't checked any other frameworks/tools, but I expect this affects some others too, since they almost certainly rely on standard browser behavior
4. Using !important makes customization harder and isn't user-friendly, leading to !important escalation and specificity wars. Notably, this is the only !important in the entire preflight
5. There are legitimate cases for overriding hidden with CSS:
   • Media queries: @media print { [hidden] { display: block; } }
   • Third-party components where you can't control the attribute
   • As pointed out by @lmatiolis in [v4] "hidden" is not the last display utility anymore #15884 (comment), one of the main suggested workarounds for that issue ("we recommend … using the HTML hidden attribute") doesn't actually work edit: Looking more carefully, it seem like in that case it is desirable for hidden attribute to take precedence, so the recommendation does work, but the change in behavior makes the migration from v3 -> v4 more difficult

Tailwind is a great tool and I understand the preflight is meant to be opinionated, reflecting the Tailwind team's preferences. But would you consider reversing this change given these impacts?