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!

Answer 2

I got the same error in a rails application. The issue was that I was importing tailwind base styles twice. Check the code below.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/screens";

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

To fix make sure you only import them once like this:

 @import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/screens";

Hope this fixes your issue.

Answer 3

Might be probably too late but for someone looking for an answer the solution is to remove

@tailwind screens;

Answer 4

In my case, the guide I followed only advised me to import the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

The solution for me was simple. I added the following import:

@tailwind screens;

Background: svelte^3.0.0 with tailwind^3.0.24