anjanesh
0
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 class="h-9 sm:h-20 rounded-full" 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"
Yes, you can add style classes based on your screen size.
I think height and width is in pixel.
<img class="h-[36px] w-[36px] lg:h[80px] lg:w-[80px] rounded-full" src="path/image-1.webp" alt="img" />
Here, I set lg is a breakpoint for desktop view. for more responsiveness you can check here
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.