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
PS: div is block automatically so you don't need to use block, it is block. You just need to hide it from lg and above as I wrote in the example ;)
But let's say that I want element that is hidden, then from md to xl is block and then hidden again it would be:
<div class="hidden md:block 2xl:hidden">Hello</div>