[Bug Report]: The .hidden class does not cascade throughout all devices

[paulocuambe]

Tailwindcss version: ^1.4.6
Description:
The .hidden class when added only works in small devices, in order to it work properly the .md:hiden must be added so the style cascade throughout the devices above.

Acording to the documentation in the responsive design section:

By default, Tailwind uses a mobile first breakpoint system, similar to what you might be used to in Bootstrap or Foundation.
What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

Steps to reproduce the bug:
Add the .hidden class in your HTML code and resize the window.

PS:. As i could not find an issue template, i did my best to describe the problem.

[adamwathan]

Can you share the exact snippet of HTML where you are seeing this problem? This is probably a misunderstanding.

As you can see here, it does hide things at all sizes:

https://tailwind.run/BcXdvF

It will only stop hiding the element if you've added another class that unhides it, like sm:block (both hidden and block target the CSS display property).

Tailwind's responsive classes are mobile-first, so hidden applies to screens 0px and up, sm:hidden applies to screens 640px and up, md:hidden applied to screens 768px and up, etc.

[paulocuambe]

Here's the code:
https://tailwind.run/BcXdvF/1

I even posted it on stack overflow when i was thinking the the problem was with the browser. You can check it here Browser not updating after remove or add a class in HTML element

Probably i'm missing something...

[adamwathan]

Yep so you have md:grid there which is what is overriding hidden. grid and hidden both set the display property.

Your code says "hide this element until the md breakpoint, then display it as a grid".

The CSS is:

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md\:grid {
    display: grid;
  }
}

What are you actually trying to accomplish? Do you want it to be visible as a grid or do you want it to be hidden? Are you trying to dynamically toggle whether it is hidden or visible using JS?

[paulocuambe]

Sorry for wasting your time with this.
I got it now, my bad. Thanks for clearing the things up.

I'm trying to toggle it using JS. I have already a solution in mind.

[paulocuambe]

The solution is pretty simple, i just had to wrap the fom inside a div and toogle it with JS.

<div class=" hidden">
    <form action="" class="p-5 w-full md:grid md:grid-cols-3 md:gap-4">
        some thing here
    </form>
</div>

Thanks @adamwathan 🎉 !