tailwindlabs/tailwindcss-typography

Element `m-X` setting will fail when define `prose-size`

mrxiaozhuox opened this issue · 1 comments

mrxiaozhuox commented

What version of @tailwindcss/typography are you using?

0.5.9

What version of Node.js are you using?

N/A

What browser are you using?

Chrome 111.0.5563.64

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/m2TMzTckJD

Describe your issue

This is a problem example: https://play.tailwindcss.com/m2TMzTckJD

When I use prose prose-sm sm:prose-base in root div, then the m-0 for image is not work.

adamwathan commented

Hey! You want to use not-prose on the parent of the badges to tell the typography plugin not to style those elements, and move the pill styling directly onto the images:

https://play.tailwindcss.com/bOknFpJYa8

The issue you see if you don't take this approach is the img styles set by sm:prose-base override your m-0 utility because of the media query being defined later in the stylesheet.

This is all by design at the time I write this, so I'm going to close this but hope the example I've shared above helps 👍