tailwind/typography: Add no-prose classes to exclude elements from styling.

[regisphilibert]

Typography is a great help for every HTML piece developers cannot control (like the product of a WYSIWYG).

The problem

But it can add a lot of overhead when one need to style something inside a .prose "wrapper". (ex: shortcodes, js injected utils like carousels etc...) and has to overwrite most of the plugin's well thought defaults.

Proposal

It would be great to be able to add a no-prose classe on descendents of a .prose parent.

<div class="prose">
   <p>Nullam id dolor id nibh ultricies vehicula ut id elit.<p>
   <div class="special-shortcode no-prose">
      <ul> [...] </ul>
   </div>
   <ul>
      <li>Milk</li>
      <li>Cheese
   </ul>
</div>

Possible approach

Injecting a :not(.no-prose) between .prose and the target would work for non-direct descendents:

.prose :not(.no-prose) p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}