Part 34: Tailwind Typography Plugin (@tailwindcss/typography & prose)

When rendering dynamic HTML from a CMS or markdown parser, you cannot easily add utility classes to every <p>, <h2>, or <blockquote>. The official @tailwindcss/typography plugin solves this.

1. Installation

npm install -D @tailwindcss/typography

Add to tailwind.config.js:

plugins: [
  require('@tailwindcss/typography'),
]

2. The Magical prose Class

Adding prose to any container automatically applies beautiful typographic styling to raw HTML:

<article class="prose lg:prose-xl dark:prose-invert mx-auto">
  <h1>Blog Post Title</h1>
  <p>Raw paragraph without manual class names looks gorgeous!</p>
  <blockquote>Quotes receive elegant borders and italic styling.</blockquote>
</article>

Key Takeaways

• Use prose to style CMS, markdown, and rich-text content without manual utility classes.
• Use dark:prose-invert for automatic dark-mode contrast.

In Part 35, we enter Module 6 to master Mobile-First Responsive Design Philosophy!