Home About Me

The Tailwind Typography Plugin Is the Easiest Way to Make Markdown Content Look Polished

2026-03-24

For a long time, custom CSS never quite felt good enough for article pages rendered from Markdown. The layout worked, but it lacked the kind of professional typography that makes long-form content comfortable to read. Then @tailwindcss/typography came along and immediately felt like the standard solution for this problem. Once you use it, there is very little reason to keep reinventing the same styles by hand.

What it does well

The main appeal of this plugin is simple: it gives rich text content solid default typography with almost no setup. That is especially useful after Tailwind’s base reset strips away most browser default styles, leaving Markdown or CMS-generated HTML looking bare.

The prose class

The core of the plugin is the prose class. Add it to a container, and all the child elements inside automatically receive carefully designed typography styles.

That includes:

  • headings from h1 to h6
  • paragraphs, lists, and blockquotes
  • code blocks, tables, and horizontal rules
  • inline elements like links, bold text, and italics
<article class="prose">
  <!-- 这里的所有 HTML 都会自动获得美观的排版样式 -->
  <h1>文章标题</h1>
  <p>正文内容...</p>
  <ul>
    <li>列表项</li>
  </ul>
</article>

For blog posts, documentation, or any content that comes from Markdown, this alone removes a lot of tedious styling work.

Size variants for different screens

Typography does not need to stay fixed at one size. The plugin provides built-in scale variants, so content can feel more compact or more spacious depending on context.

Available options include:

  • prose-sm - small
  • prose (default)
  • prose-lg - large
  • prose-xl - extra large

You can combine these with responsive utilities to adjust reading size across breakpoints:

<article class="prose md:prose-lg lg:prose-xl">
  <!-- 响应式：小屏默认，中等屏幕 lg，大屏幕 xl -->
</article>

This makes it easy to keep content readable on smaller screens while giving larger displays a more comfortable layout.

Several grayscale themes

The plugin also includes five gray-based color themes, each with a slightly different visual character.

<table> <thead> <tr> <th>Class name</th> <th>Tone direction</th> <th>Visual feel</th> <th>Good fit for</th> </tr> </thead> <tbody> <tr> <td>prose-gray</td> <td>pure gray</td> <td>neutral, standard</td> <td>general-purpose use, default choice</td> </tr> <tr> <td>prose-slate</td> <td>blue-gray</td> <td>cool, modern, technical</td> <td>tech sites, SaaS products</td> </tr> <tr> <td>prose-zinc</td> <td>cyan-gray leaning</td> <td>fresh, neutral with a cool edge</td> <td>modern minimalist designs</td> </tr> <tr> <td>prose-neutral</td> <td>warm gray</td> <td>soft, warm</td> <td>sites that need a gentler tone</td> </tr> <tr> <td>prose-stone</td> <td>yellow/brown gray</td> <td>vintage, natural, warm</td> <td>blogs, literary content</td> </tr> </tbody> </table>

The five available grayscale variants are:

  • prose-gray（默认）
  • prose-slate
  • prose-zinc
  • prose-neutral
  • prose-stone

Example:

<article class="prose prose-slate">
  <!-- 使用 slate 灰度配色 -->
</article>

If you want typography to better match a brand mood or content category, these presets are a practical starting point.

Built-in dark mode support

Dark mode is also straightforward. Add dark:prose-invert, and the typography colors switch automatically to work on dark backgrounds.

<article class="prose prose-slate dark:prose-invert">
  <!-- 自动适配暗色模式 -->
</article>

That saves you from manually redefining the full set of text, heading, code, and quote colors for dark themes.

Installation and setup

Tailwind CSS v4 (recommended)

Install the plugin:

npm install -D @tailwindcss/typography

Then import it in your CSS file:

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

Tailwind CSS v3

With v3, the plugin is added through the Tailwind configuration file:

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

The configuration style differs because Tailwind CSS v4 uses a CSS-first approach, while v3 relies on JavaScript config.

Where it fits best

This plugin is especially useful anywhere you need consistent typography for rich text content:

  • Blog posts: Markdown-rendered articles
  • Documentation sites: technical docs and API references
  • CMS content: HTML generated from rich text editors in admin panels
  • Email templates: email content that needs uniform formatting

A few things to watch out for

  1. Do not nest prose containers: placing one prose block inside another can create styling conflicts.
  2. Mind style precedence: Tailwind’s preflight reset may sometimes interact with prose styles in unexpected ways, so checking specificity can be necessary.
  3. Be aware of v4 differences: Tailwind CSS v4 changed how configuration works, so setup is not the same as in v3.

In practice, this plugin solves a very common Tailwind problem: once browser defaults are reset, rich text content becomes awkward to style from scratch. @tailwindcss/typography fills that gap cleanly, and for content-heavy sites it is hard not to see it as an essential tool.

Related Posts