DEV Community

kouliavtsev
kouliavtsev

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

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

--- title: "Very important article" --- Some text <Warning> <p>Be careful!</p> </Warning>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
danidiaztech profile image
Daniel Diaz •

Thanks! Needed exactly that