Let height and width attributes on images do their job

[vkosciuszko]

I think it would be a good to add something like this into tailwind's preflight :

img[width],
img[height] {
    max-width: none;
    height: unset;
}

Currently, those two attributes do nothing because of these rules

[babakfp]

STOP, Don't add those styles into your project. in default, <img> and <video> size is bigger than the screen size and this will cause a flow problem.

[vkosciuszko]

Yeah, because fixing a profile picture size to 50px height or a logo to 40px will cause a lot of flow problems.

There are many cases where you don't want an image to scale with the rest of the UI and in all those case those attributes are good.

[adamwathan]

The tough part here is that the width and height attributes only accept values in pixels and we recommend using rem values in Tailwind. I generally recommend people use inline styles for this instead of the width and height attributes but I agree it’s a bit ugly compared to the attributes. Thoughts?

[vkosciuszko]

I don't see any harms in letting the user decide if he wants to use the attributes or inline styling. And doing so tailwind doesn't change HTML behavior.

Rem is better but sometimes it doesn't really matter don't you think ? I prefer adding height or width on the logo than adding an entry in tailwind's config to get the value I want.

[adamwathan]

One issue is that img[width] has a specificity of 011 and max-w-full for example has a specificity of 010, so the max-w-full utility wouldn't work anymore on that element.

I prefer adding height or width on the logo than adding an entry in tailwind's config to get the value I want.

What do you do if you need to change the size at different breakpoints, do you hide/show multiple copies of the image?

[vkosciuszko]

One issue is that img[width] has a specificity of 011 and max-w-full for example has a specificity of 010, so the max-w-full utility wouldn't work anymore on that element.

It's how it's supposed to work. If the user decide to use width or height it's because he wants that size. I guess most of the time those are used on small image like logo or profile picture, I don't see any usage other than that and I agree on bigger / more important element they could break everything but it won't be tailwind fault.

What do you do if you need to change the size at different breakpoints, do you hide/show multiple copies of the image?

If I need to alter the size I don't use those attributes except on logo where most of the time I hide/show multiple image because they aren't the same (logo + text on big and only logo on small).

We shouldn't think about what could happen but more about what the user expects. If the user want the size to be 500px width, let it be.

[adamwathan]

Doing some more research, and setting a width and height on images is going to become important soon just for defining the aspect ratio of the image, even if the width and height attributes are not the size you actually want the image to be rendered at:

https://twitter.com/simevidas/status/1172886337474781184

So I think it's best to not make any changes here by default I'm afraid 😕 It would be a breaking change as well which is something we try to avoid without a great reason.

You can add these styles as custom base styles if you like for your own projects though 👍