Usage of `block` and `hidden` in Tailwind UI code-CodePudding

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
    
    src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
    alt="Your Company"
/>
<img
    
    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
    
    src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
    alt="Your Company"
/>

CodePudding user response：

<img

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

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

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.

CodePudding user response：

The point here is that, you can have separate styled img components for different screen size (that is you can add different utility classes for both)

Here the given example code is useless (or can be written as you mentioned)

The real use case can be understood by the following example

<img
    
    src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
    alt="Your Company"
/>
<img
    
    src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
    alt="Your Company"
/>

Here the border will only be visible on screen size less than lg. Similarly you can add utility classes as you like.

CodePudding user response：

block lg:hidden : means it is shown in all screens except large screen sizes and above.

hidden lg:block : means it is shown in all large screen sizes and above only, so it is not visible in smaller screens.

this simple hack has been adapted from bootstrap which also has these sm/md/lg conventions to allow you to control responsiveness easier.

update : different viewport sizes require different image sizes. for a lot of reasons : the image is one of those elements that are heavy and expensive in rendering and to be requested from the server. so preventing a huge image from showing on the mobile version is a good approach, and using a smaller one instead may optimize the performance. in some cases, there are images that contain real content that you wanna the user to see .. the content on the desktop version of the image should vary in font size and in volume from that in the mobile version of the image. in a lot of cases, you are going to have to use different images for different viewports.

there are also different approaches which are to use the picture tag. see it on the mdn from here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture