Tailwind CSS Typography Plugin

To use the hand-designed dark mode version of your chosen color theme, add the prose-invert class. This is typically used alongside Tailwind's dark: variant.

<article class="prose dark:prose-invert">{{ markdown }}</article>

If you want to use a class name other than prose for your typography styles, you can specify a className option when registering the plugin in your CSS.

When a custom name is provided, all related utilities (like prose-xl or not-prose) will use that new name as a prefix (e.g., wysiwyg and not-wysiwyg).

@import 'tailwindcss';
@plugin "@tailwindcss/typography" {
  className: wysiwyg;
}

<article class="wysiwyg wysiwyg-slate lg:wysiwyg-xl">
  <h1>My Heading</h1>
  <div class="not-wysiwyg">
    <!-- Prose-free content -->
  </div>
</article>

The @tailwindcss/typography plugin provides a prose class that automatically applies beautiful, well-formatted typography styles to a block of vanilla HTML content. This is ideal for styling content rendered from a CMS, Markdown, or a rich-text editor where you want to avoid manual CSS for every element (headings, paragraphs, lists, etc.).

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children...
  </p>
  <!-- ... -->
</article>

By default, size modifiers include a max-width to maintain readability. To make the prose content fill the entire width of its parent container, add the max-w-none utility class.

<div class="col-span-3">
  <article class="prose max-w-none">{{ markdown }}</article>
</div>

Apply the prose class to a container (like an <article> or <div>) to add beautiful typographic defaults to vanilla HTML content (e.g., Markdown or CMS output).

You can combine prose with size and color modifiers to adjust the look and feel.

<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children...
  </p>
</article>

Install the @tailwindcss/typography plugin via npm as a development dependency.

For Tailwind CSS v4 (using CSS imports): Add the plugin to your main style.css file using the @plugin directive.

For Tailwind CSS v3 (using tailwind.config.js): Add the plugin to the plugins array in your configuration file.

npm install -D @tailwindcss/typography

/* Tailwind CSS v4 */
@import "tailwindcss";
@plugin "@tailwindcss/typography";

// Tailwind CSS v3
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

To prevent a block of markup from inheriting prose styles when it is nested inside a prose container, use the not-prose class. This creates a sandbox that is free from typography plugin styles.

Note:

• You cannot nest new prose instances within a not-prose block at this time.
• Even if you use a prefix for your typography utilities, not-prose should not have a prefix.

<article class="prose">
  <h1>My Heading</h1>
  <p>...</p>

  <div class="not-prose">
    <!-- Some example or demo that needs to be prose-free -->
  </div>

  <p>...</p>
</article>

To use the typography plugin, add it to your tailwind.config.js file using the plugins array. You can pass an options object to customize the base class name and the CSS target mode.

Options:

• className: The base class name used to trigger typography styles (defaults to 'prose').
• target: Determines the CSS selector strategy. Use 'modern' (default) for :where() and :is() selectors to reduce specificity, or 'legacy' for standard descendant selectors.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography'),
    // Or with custom options:
    require('@tailwindcss/typography')({ className: 'my-prose', target: 'modern' }),
  ],
}

If you have elements within a prose container that should not inherit the typography plugin's styles (for example, a heading that should use default Tailwind or browser styles), wrap them in a div with the not-prose class.

<div className="not-prose">
  <h2>Shouldn't be colored</h2>
</div>

The prose class includes default styling for a wide range of common HTML elements, including:

• Headings: h1 through h4 (Note: h5 and h6 are not styled by default as they are similar in size to body copy).
• Text: Paragraphs (p), bold (strong), italics (em), and links (a).
• Lists: Unordered lists (ul), ordered lists (ol), and description lists (dl with dt and dd).
• Code: Inline code elements and code blocks.
• Quotes: Blockquotes (blockquote).
• Media: Figures (figure) and images (img) with captions (figcaption).
• Tables: Standard HTML tables.
• Complex Layouts: Handles nested lists and spacing for headings that follow paragraphs or other headings.