Looking at the Tailwind UI example source code for the Navbar component at https://tailwindui.com/components/application-ui/navigation/navbars, I see there is this part:
<img
class="block h-8 w-auto lg:hidden"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"
/>
<img
class="hidden h-8 w-auto lg:block"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"
/>
What's the purpose of this code? It seems it's just showing either of the imgs depending on whether we are lg. But how is that different from just:
<img
class="block h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"
/>
<img
class="block h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"/>
Output of the above code will be visible across all screens.
<img
class="block h-8 w-auto lg:hidden"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"/>
Visible across all screens and hidden on large screens.
<img
class="hidden h-8 w-auto lg:block"
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
alt="Your Company"/>
hidden across all devices and visible on large screens only.
it will be beneficial in case you have different images, and you want one image in x screen size and y image on another screen size.
For example, if you have two banners, one for the mobile version and another for the desktop or larger screens, then you would add the classes above to achieve that.