tailwindcss: .hidden does not work with flex

That’s a great example and you’re right, the “right” way to hide something would be to add hidden sm:hidden md:hidden lg:hidden xl:hidden to an element.

I think if you want to be able to force-hide something with a single class, I would recommend adding a new utility yourself like:

.hidden\! {
  display: none !important;
}

…which you could add to elements like:

<div class="flex sm:inline-flex hidden!">
    ...
</div>

I don’t really think of this as a bug; both hidden and flex set the display property, so IMO you should expect undefined behavior here really. Something can’t be hidden and flex, it can only be one or the other, so you should only add one of those classes.

To me it’s like saying “I have an element with these classes bg-purple bg-blue but the background is purple instead of blue”; only one of them can work, why should purple work instead of blue?

I’ll think on this a bit longer in this case because I understand why you’d want it to work this way, but in general you should try to avoid adding two classes to the same element that set the same property.

Maybe a cleaner approach would be to do this:

.flex.hidden {
  display: none;
}

@kirqe If your box class is defined at the end of your stylesheet then that is expected, because your CSS effectively looks like this:

.flex { display: flex }
.hidden { display: none }
.box { display: flex }
.box.collapsed { display: none }

So when you apply hidden and box at the same time, box “wins” since it is defined last.

@adamwathan You’re saying that this is a competition and something can’t be hidden and flex. You’re correct. You just need to pick the winner. I’m pretty sure most would agree that hidden should be the winner as there’s no other reason to add such a class.

I don’t see you using both there, only md:flex, not flex.

Sorry I don’t see exactly where you’re doing it in the example, but the idea is that if you want to add hidden, you should also remove flex at the same time. They are competing for the same property (display) so you should avoid having both classes on the same element. It’s fine to combine the responsive versions like flex md:hidden since they kick in at different times, but you really shouldn’t have flex hidden on an element, you should just have flex or hidden.