Building rich text with Tailwind Typography

This page uses Tailwind Typography plugin defaults via the .prose class. It is useful for content you do not fully control, such as Markdown, CMS content, or WYSIWYG output.

Why prose is useful

• Gives sensible spacing and hierarchy to unknown HTML.
• Styles lists, quotes, tables, and code blocks consistently.
• Reduces the need to add utility classes to every element.

When to use it

1. Long-form documentation pages.
2. Blog content rendered from Markdown.
3. CMS pages with rich text editors.

You can still combine prose with utility classes. For example, see the official Typography plugin docs.

Use semantic fluid classes for app UI you control, and .prose wrappers for rich text you do not control.

Inline elements preview

This paragraph demonstrates strong text, emphasis, deleted text, and inline code. You can press Cmd + K to open command palettes in many apps.

Sample code block

<article class="prose prose-slate">
  <h1>Post title</h1>
  <p>Rendered markdown content...</p>
</article>

Nested list sample

• Core setup
  • Import Tailwind and typography plugin.
  • Add a prose wrapper around unknown HTML.
• Optional extension
  • Create a custom prose variant for brand styling.
  • Bridge headings/body to your fluid scale.

Sample table

Image + caption