patterncsstailwindTip

@tailwindcss/typography prose plugin for rich text content

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

@tailwindcss/typography v0.5+

typographyprosemarkdownrich textCMSpluginheadings lists

Problem

HTML rendered from Markdown, a CMS, or user-generated content has no styles applied in a Tailwind project because Tailwind's preflight resets all browser defaults. Headings, lists, blockquotes, and code blocks appear unstyled.

Solution

Install and use the official typography plugin:

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [require('@tailwindcss/typography')],
};

<!-- Apply to any container with HTML content -->
<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- Rendered markdown/HTML goes here -->
</article>

Customize via theme:

extend: {
  typography: (theme) => ({
    DEFAULT: {
      css: {
        color: theme('colors.gray.700'),
        a: { color: theme('colors.blue.600') },
      },
    },
  }),
}

Why

The prose class applies a carefully crafted set of styles targeting all descendant HTML elements, designed to look good without knowing the element structure in advance.

Gotchas

prose-invert is required for dark mode — without it, text is unreadable on dark backgrounds.
max-w-prose (65ch) is applied by default — add max-w-none to fill the container.
Customizations must be placed inside the typography key in theme.extend, not directly in the prose plugin options.
The plugin scans content for prose classes so ensure your template files are in the content paths.

Context

When rendering HTML from Markdown, a headless CMS, or user-generated content.

Revisions (0)

No revisions yet.