Nov 18, 2024

Use no-prose with size modifier in Tailwind Typography

Using Tailwind Typography’s no-prose class to undo styles added by prose works great, but if you’re also using a size modifier such as prose-lg those styles don’t get removed.

Thankfully, there’s an easy solution to this. Just use prose-base to undo the styles added by the size modifier class, like this:

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

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

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