not-prose only on child elements

[JurjenRoels]

I hav a question about Tailwindcss and specific the not-prose class.

I want an image to not be formatted by prose. so i have <img class=“not-prose”>

But for the image not to be shown in prose markup I have to have a parent tag with class=“not-prose”. So <div class=“not-prose”><img /></div> or <td class=“not-prose”><img></td> is working. is not.

This is the class in the inspector that is matched.(.prose :where(img):not(:where([class~=not-prose] )) {…..})

Do I need to add some classes to my safe list in compiling the css file or is this the intended behavior?

Thank you.

[wongjn]

It is intended behavior that you need to wrap the non-prose-styled content with an element that has the not-prose class, as per the documentation:

If you have a block of markup embedded in some content that shouldn’t inherit the prose styles, use the not-prose class to sandbox it:

<article class="prose">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-prose">
    <!-- Some example or demo that needs to be prose-free -->
  </div>

  <p>...</p>
  <!-- ... -->
</article>

[JurjenRoels]

Thank you.

[piszczu4]

What if I want to again add prose to child that is wrapped in not-prose? It seems that this child prose is ignored beacuse of parent not-prose :(