Missing element modifier `prose-picture`

[tordans]

What version of @tailwindcss/typography are you using?

"@tailwindcss/typography": "^0.5.15",

What version of Node.js are you using?

lts/*

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction repository

• https://play.tailwindcss.com/VFWabWBye5

Describe your issue

The PR https://github.com/tailwindlabs/tailwindcss-typography/pull/314 (Issue https://github.com/tailwindlabs/tailwindcss-typography/issues/144) added default styles to the <picture> but there are is no element modifier defined that would allow us to easily change the default styles via classes

• https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#element-modifiers
• https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/index.js#L104

I suggest to add two modfiers

• prose-picture:* targeting <picture>
• prose-images:* targeting <img> <picture>

---

Another question that this brings up is, if the prose-img modifier should target the picture>img element as well. It does ATM https://play.tailwindcss.com/VFWabWBye5 so changing this is likely a breaking change and something to be resolved separately?

[tordans]

Also, just in case someone comes here after using Astros <Picture> Element, there is an easy overwrite:

      <Picture
        src={image}
        formats={['png', 'avif']}
        class="rounded" // classes on the <img> tag
        pictureAttributes={{ class: 'not-prose' }} // classes on the <picture> tag
        alt=""
      />

[bmiit145]

I have added wait for approval from maintainer

[abdobouna]

Also, support is missing for the definition list <dl>.

[piotrkulpinski]

Would love to be able to modify abbr styles: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr

[philipp-spiess]

Will be in in the next patch release 👍