Dont set height to auto if an img tag has an height

[oskarleonard]

Since there is no way to override height once it has been set (to make it behave as the same way as if no height attribute has been set at all), it would be less opinionated to only set height: auto if an height attribute on the img tag doesnt exists.

[reinink]

@oskarleonard Hey, thanks for submitting this PR (and the related issue #7739). This would be a great solution, but unfortunately these selectors have a higher specificity than a class:

That means that classes like h-32 would just stop working, because this base style would override the height back to auto.

We've honestly considered completely removing this rule from our base styles in the past, but we're extremely hesitant to do this because it will be a pretty huge breaking change for people. Meaning, I think we're kind of stuck with it 😕

Also, I'm not sure how accurate this is, but our understanding is that the "modern" use case for width and height attributes is to hint to the browser about aspect ratio, not necessary to actually set the actual width and height. They are the source width and height, not the intended display size.

Workaround 1

What we typically recommend is that you use an arbitrary value (or even an inline style) instead of the height attribute, which will always work and override the height: auto rule we set in our base styles. For example:

<img class="h-[134px]" src="http://...">

Workaround 2

Another workaround to actually remove this rule is to just disable preflight, and then copy/paste preflight back into the project manually, removing this unwanted rule.

Workaround 3

Another more creative solution is to use a package like PostCSS Remove Rules to pluck out the unwanted rule after Tailwind CSS runs. I was able to get that plugin working with this postcss.config.js config in an existing Tailwind CSS project:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-remove-rules": {
      rulesToRemove: {
        "img,\nvideo": "height",
      },
    },
  },
}

---

So yeah, while we'd love to fix this, ideally by just removing the rule entirely, I think we need to leave things as they are. I really appreciate you taking the time to submit this either way. Hopefully one of my above solutions will work for you 🙏