CODEWITHSUNDEEP
htmlcsstailwind-css
cayblood
cayblood

Reputation: 1876

Trouble with responsive breakpoints in tailwind

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.

Upvotes: 0

Views: 638

Answers (2)

user17932479
user17932479

Reputation:

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>

Upvotes: 1

MrPatel2021
MrPatel2021

Reputation: 211

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

Upvotes: 1

Related Questions