Tailwind CSS에서 산문 클래스를 재정의하는 방법은 무엇입니까?

스타일링 기사에 관해서는 @tailwindcss/typography과 함께 일하는 것을 좋아합니다.
플러그인. 🤩 HTML 요소에 .prose를 추가하기만 하면 자체적으로 내부 HTML 요소의 스타일을 지정합니다.

<article class="prose">
  <h1>Title</h2>
  <p>Some text</p>

  <h2>Subtitle</h2>
  <p>Some text</p>

  <ul>
   <li>item 1</li>
   <li>item 2</li>
  </ul>
</article>

MDX 구성 요소로 작업하는 동안 내부 구성 요소의 스타일을 지정하려는 경우 약간 까다롭습니다.

문제

예를 들어 MDX 기사 내에서 <Warning /> 구성 요소의 스타일을 지정하려고 합니다. 이와 같은 것을 만들 것입니다.

export default function Warning({ children }) {
  return (
    <section
      className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}

이러한 방식으로 구성 요소가 기사에 추가됩니다.

---
title: "Very important article"
---

Some text

<Warning>
  <p>Be careful!</p>
</Warning>

결과는 다음과 같습니다.

<article class="prose">
  <p>Some text</p>

  <section className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500">
    <p>Be careful!</p>
  </section>;
</article>

.text-red-500가 경고 섹션에 적용되더라도 텍스트는 .prose의 스타일을 상속합니다. 헐... 😬

해결책

솔루션은 실제로 매우 간단합니다.

섹션 요소에 .not-prose를 추가하면 .prose 스타일이 무시됩니다.

export default function Warning({ children }) {
  return (
    <section
      // Adding .not-prose here! 🏗
      className="not-prose px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
    >
      {children}
    </section>
  );
}