Typography Plugins & Prose

Typography Plugins & Prose

For long-form content like articles and documentation, use the official @tailwindcss/typography plugin.

Installing the plugin

npm install -D @tailwindcss/typography

Enable it in your CSS:

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

Using prose

Add the prose class to an article container. It styles all nested elements with sensible defaults:

<article class="prose">
  <h1>Garlic bread with cheese</h1>
  <p>...</p>
  <ul><li>...</li></ul>
  <blockquote>...</blockquote>
</article>

Modifiers

• prose-neutral - gray-tinted prose.
• prose-slate, prose-gray, prose-stone - other tints.
• prose-sm, prose-base, prose-lg, prose-xl, prose-2xl - size.
• dark:prose-invert - invert colors for dark mode.

<article class="prose prose-neutral dark:prose-invert">...</article>

Customizing

Add --typography-* variables in @theme to customize colors, sizes, etc. of the prose styles.

TL;DR

• @tailwindcss/typography adds the prose class.
• prose styles articles, headings, lists, quotes automatically.
• Use prose-neutral, prose-lg, dark:prose-invert.
• Customize via --typography-* theme variables.