How to override prose class in Tailwind CSS?

#tailwindcss #webdev #react #nextjs

When it comes to styling articles, I love working with @tailwindcss/typography
plugin. 🤩 By simply adding .prose to an HTML element it styles the inner HTML elements by itself.

<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>

While working with MDX components it makes a bit challenging if you want to style inner components.

The problem

For example you want style a <Warning /> component inside an MDX article. You would create something like this.

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>
  );
}

The component will be added to the article in this manner.

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

Some text

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

This will yield:

<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>

Even though .text-red-500 is applied on the warning section, the text will inherit the styles from the .prose. Yikes... 😬

The solution

The solution is actually quite simple.

By adding .not-prose to the section element the .prose styles will be ignored.

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>
  );
}