顺风响应断点的问题

Question

I'm having trouble with the following simple html code using tailwindcss:

<div class="md:hidden">
  default
</div>
<div class="hidden sm:visible md:hidden">
  sm
</div>
<div class="hidden md:visible lg:hidden">
  md
</div>
<div class="hidden lg:visible">
  lg
</div>

Instead of displaying "default" below 640px, then "sm" from 640px to 768px, then "md" from 768px to 1024px, then "lg" above 1024px, it seems to show "default" until 768px, then nothing. I can't figure out why it doesn't seem to follow the guidelines in the docs . Codepen example here .

Answer 1

You need to use class block instead of hidden . You can also check here , I try to resolve your problem.

Answer 2

The hidden class in tailwind changes the display property where the visible changes the visibility property. For you code to work you would need to use a display property such as flex. More information can be found here Display Tailwind CSS Docs

Also to display default to 640px you need to change the first div to hidden after the small breakpoint instead of the medium breakpoint, change to class sm:hidden. This will set display to hidden at 640px and higher.

See playground here

Updated Code:

<div class="flex sm:hidden">default</div>
<div class="hidden sm:flex md:hidden">sm</div>
<div class="hidden md:flex lg:hidden">md</div>
<div class="hidden lg:flex">lg</div>