https://kellenmace.com/_app/immutable/chunks/BezMTj0c.js

1import{b as c,t as u}from"./DYlqQAKM.js";import"./PbBaDgI_.js";import{X as i,$ as r,Y as k,Z as d}from"./Cc7_iAaH.js";import{h as g}from"./B-63aLme.js";import{l as m,s as h}from"./DZiJuw4t.js";import{L as _}from"./BZLVUxjg.js";const n={title:"Use no-prose with size modifier in Tailwind Typography",date:"2024-11-18T22:27:44.148Z"};var f=u('<p>Using Tailwind Typography’s <code>no-prose</code> class to undo styles added by <code>prose</code> works great, but if you’re also using a size modifier such as <code>prose-lg</code> those styles don’t get removed.</p> <p>Thankfully, there’s an easy solution to this. Just use <code>prose-base</code> to undo the styles added by the size modifier class, like this:</p> <pre class="language-html"><!></pre>',1);function y(t,p){const e=m(p,["children","$$slots","$$events","$$legacy"]);_(t,h(()=>e,n,{children:(o,v)=>{var s=f(),a=i(r(s),4),l=k(a);g(l,()=>`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prose prose-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
2  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>My Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
3  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
4
5  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>not-prose prose-base<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
6    <span class="token comment">&lt;!-- Some example or demo that needs to be prose-free --></span>
7  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
8
9  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
10  <span class="token comment">&lt;!-- ... --></span>
11<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">></span></span></code>`),d(a),c(o,s)},$$slots:{default:!0}}))}const S=Object.freeze(Object.defineProperty({__proto__:null,default:y,metadata:n},Symbol.toStringTag,{value:"Module"}));export{S as _,y as a};