The Typography Plugin (prose)

The typography plugin styles raw HTML from Markdown or a CMS with one prose class.

4 min read Level 2/5 #tailwind#typography#plugins

What you'll learn

Install and register the typography plugin
Apply prose with size and color modifiers
Customize prose with element modifiers

Utility-first works great for UI you control element by element. But Markdown and CMS output produce HTML you do not author directly — that is exactly what the typography plugin solves.

Install and Register

In v4 plugins are registered in CSS, not a config file:

npm i -D @tailwindcss/typography

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Apply prose

Wrap rendered content in a single prose class and every heading, paragraph, list, and code block gets sensible defaults:

<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- raw HTML from your Markdown renderer -->
</article>

prose-lg scales the whole typographic system up.
dark:prose-invert flips it for dark mode.
max-w-none removes the default readable line-length cap when you want full width.

Customizing prose

Element modifiers let you override any part without ejecting from the plugin:

<article class="prose prose-headings:font-display prose-a:text-blue-600 prose-img:rounded-xl">
  …
</article>

Use these to make rendered content match your brand while keeping the plugin’s spacing and rhythm intact.

Borders & Border Radius →