Trouble with responsive breakpoints in tailwind-CodePudding

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

<div >
  default
</div>
<div >
  sm
</div>
<div >
  md
</div>
<div >
  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.

CodePudding user response：

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

CodePudding user response：

There is an error in your code. The first div should be sm:hidden. This will hide default at 640px and above.

Corrected Code:

<div >
  default
</div>
<div >
  sm
</div>
<div >
  md
</div>
<div >
  lg
</div>