I have a div with a class of hidden md:block housing this element from heroicon:
<MenuIcon class="ml-1 mr-2 h-5 w-5 text-gray-500"/>.
Currently, the div element only show when the screen size is at md, but I want to show at md and below, how exactly do I do that?
Tailwind breakpoints are mobile first, so they go UP. At first everything is visible.
You just need to hide elem. from some size and up:
sm -> md -> lg -> xl -> 2xl
class="lg:hidden" will hide element from lg and above - lg, xl, 2xl
For more info about the topic look at: Responsive design in Tailwind
I believe you are doing it in reverse.
Basically => https://tailwindcss.com/docs/responsive-design
Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.
So you would have to do class="block lg:hidden" in your classes for it to work as you are describing :)
