Level 73
hidden hides on all screen sizes, md:hidden hides on medium screens and up.
https://tailwindcss.com/docs/display#breakpoints-and-media-queries
Apr 1, 2024
10
Level 2
Tailwind CSS hidden not working with all responsive breakpoints
This class is not working:
<img class="md:hidden" src="{{asset('storage/img/'.$pdf->filename)}}" alt="{{$pdf->filename}}">
yet this one is working:
<img class="hidden" src="{{asset('storage/img/'.$pdf->filename)}}" alt="{{$pdf->filename}}">
In fact all breakpoints are not working with the hidden utility
Level 122
are you building the css every time?
Level 2
@Snapey No.
Level 73
@FireBlade You should run npm run dev in the root of your project, unless you are using tailwind from a cdn.
Level 47
Resize your screen or use the dev tools to set as medium size to verify it is. If not post back and let us know.
Should display at large and I believe (not 100% sure and to lazy to go verify) that it may display at "small" size
Level 29
@jekinney When using md:hidden on an element, the element will only display at sizes smaller than md (768px)
Level 122
@gych sizes greater than
Level 29
@Snapey No it will display at sizes greater than md (768px) if you use max-md:hidden
Level 122
@gych no thats not right for tailwind
hidden is applied at all breakpoints
md:hidden is applied at medium and greater
From the docs in responsive section;
By default, the outer div is display: block, but by adding the md:flex utility, it becomes display: flex on medium screens and larger.
Level 29
@Snapey Yes and that matches exactly what I said:
When using md:hidden on an element, the element will only display at sizes smaller than md (768px)
I never said that the hidden class is only applied at sizes smaller than md when using md:hidden
Please or to participate in this conversation.