The rendered image height is incorrect.

[jwcesign]

What version of @tailwindcss/typography are you using?

0.5.12

What version of Node.js are you using?

v18.16.1

What browser are you using?

chrome

What operating system are you using?

Windows

Reproduction repository

https://github.com/jwcesign/md-render

Describe your issue

With the original official react-markdown demo(https://remarkjs.github.io/react-markdown/), it renders correct for : https://raw.githubusercontent.com/alist-org/alist/v3.33.0/README.md

But with my demo project, it does not work fine for the big log:

After I change from height to width, it works fine: https://github.com/alist-org/alist/pull/6282

[jwcesign]

BTW, nice project, thanks for your hard work!

[reinink]

Hey! So technically this isn't an issue with the Typography plugin, but rather it's being caused by the Preflight styles in Tailwind CSS:

https://github.com/tailwindlabs/tailwindcss/blob/b01283cc9b66cf830d87cbfe1fbb5ebb8561226a/src/css/preflight.css#L369-L377

This is something we might eventually change, as there has been discussion about this previously:

https://github.com/tailwindlabs/tailwindcss/issues/506 https://github.com/tailwindlabs/tailwindcss/pull/7742

Until then, one trick you can use to undo these Preflight styles is to use revert-layer:

img {
  height: revert-layer;
}

Alternatively, you could also set an explicit hight for this image using a creative attribute selector — something like this:

img[alt="logo"]{
  height: 100px;
}

Hope that helps! 👍