[v4] "hidden" is not the last display utility anymore
Problem
What version of Tailwind CSS are you using? v4.0 Reproduction URL https://play.tailwindcss.com/1XH8TJa6s3 for v4 (element is shown) https://play.tailwindcss.com/Ajm578zcYz for v3.4.15 (element is not shown) Describe your issue The order of the `display` utilities has slightly changed in v4, putting `hidden` somewhere in the middle of these utilities by default (after `block`, but before `inline-block` or `inline-flex`), where in v3.4 it was at the end of all the `display` utilities. I have used TailwindCSS often like this: [code block] Then I remove or re-add the hidden class with Javascript, which worked fine in v3. In v4 this does not work with `inline-block` anymore (because `inline-block` comes after `hidden` in the generated CSS), while it does work with `block` (as it comes before `hidden`). I found the behavior better in v3.4, where `hidden` was assumed to be the preferred/overriding value (if set) of all the display utilities and comes last in the definitions. I could imagine many people used `hidden` in this way and will find the new order surprising.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: [v4] "hidden" is not the last display utility anymore
@philipp-spiess Yes, the `hidden` attribute is a good way to solve it and maybe some additional documentation about it would be helpful (so far I didn't find anything about it in the docs, it is also not mentioned in the preflight explanation). It was quite a bit of work though even in my not-so-huge application, so changing the order of the `hidden` class to come last in the CSS like in v3 would
Trust Score
4 verifications
- 1
@philipp-spiess Yes, the `hidden` attribute is a good way to solve it and maybe
@philipp-spiess Yes, the `hidden` attribute is a good way to solve it and maybe some additional documentation about it would be helpful (so far I didn't find anything about it in the docs, it is also not mentioned in the preflight explanation).
- 2
It was quite a bit of work though even in my not-so-huge application, so changin
It was quite a bit of work though even in my not-so-huge application, so changing the order of the `hidden` class to come last in the CSS like in v3 would avoid this possible BC break for applications doing something similar without having to do a lot of changes, therefore I still think it would make sense to avoid this pain point for other users upgrading to v4 while also adjusting the docs to promote using the `hidden` attribute for this kind of behavior from now on.
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #15884. Community reactions: 5 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep