Setting an image's width and height to different values based on responsiveness-CodePudding

I am using TailwindCSS 3.x to display an image as h-9 sm:h-20 using TailWindCSS's utility classes based on responsiveness.

<img  src="path/image-1.webp" alt="img" />

I want to know if it's possible to achieve the same using img attributes width and height ?

For desktop I want it set as width="80" height="80"
For mobile I want it as width="36" height="36"

CodePudding user response：

No, it isn't possible. Because tailwind just work in className.

Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.

In order for Tailwind to generate all of the CSS you need, you have to put your classes inside class Name.

tailwind content-configuration doc

CodePudding user response：

Yes, you can add style classes based on your screen size.

I think height and width is in pixel.
<img src="path/image-1.webp" alt="img" />

Here, I set lg is a breakpoint for desktop view. for more responsiveness you can check here