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>