class="hidden sm:flex" doesn't work in TailwindCSS

Question

I want to make my navbar responsive by adding hidden sm:flex to a specific item. Meaning it'll hidden by default but show only on small screens and above. I made some debug and discover that hidden override everything even the responsive variants. Other display properties work will on responsive variants. here's my code:

className="hidden sm:flex sm:w-2/5 w-11/12 mt-4 sm:mt-0 items-center shadow-md"

Answer 1

Tailwind is driven by mobile first design, just like bootstrap and some other CSS frameworks. Reference: https://tailwindcss.com/docs/responsive-design/#mobile-first

That means that classes without variants will be applied to smaller screens first, and then you can add variants for bigger screens.

So, the thing that you want to achieve should be like this:

className="flex md:hidden w-2/5 md:w-11/12 mt-0 md:mt-4 items-center shadow-md"

I hope this helps!