Tailwind Prose Cheatsheet

Posted Feb 28, 2026

By Daniel Florido

32 min read

Install

npm install -D @tailwindcss/typography

  
// tailwind.config.js
plugins: [require('@tailwindcss/typography')]

Basic usage

Wrap any block of HTML (CMS content, markdown output, etc) with prose:

  
<div class="prose">
  <h1>Title</h1>
  <p>Paragraph text...</p>
</div>

No extra classes needed on child elements. Prose styles h1–h6, p, a, blockquote, code, pre, ul, ol, li, table, img, hr automatically.

Size modifiers

Class	Base font size
`prose-sm`	14px
`prose`	16px (default)
`prose-base`	16px
`prose-lg`	18px
`prose-xl`	20px
`prose-2xl`	24px

  
<div class="prose prose-lg">...</div>

Color modifiers

Built-in color variants map to Tailwind’s color palette:

  
<div class="prose prose-slate">...</div>
<div class="prose prose-zinc">...</div>
<div class="prose prose-neutral">...</div>
<div class="prose prose-gray">...</div>
<div class="prose prose-stone">...</div>

These control the text color of headings, body, links, etc.

Dark mode

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

prose-invert flips all colors for dark backgrounds. Enable dark mode in tailwind config first:

  
// tailwind.config.js
darkMode: 'class'

Element-level modifiers

Override styles for specific elements using prose-{element}: prefix:

  
<div class="prose prose-headings:font-bold prose-headings:text-blue-600">...</div>
<div class="prose prose-a:text-blue-500 prose-a:no-underline hover:prose-a:underline">...</div>
<div class="prose prose-blockquote:border-blue-500 prose-blockquote:italic">...</div>
<div class="prose prose-code:text-pink-500 prose-code:bg-gray-100">...</div>
<div class="prose prose-img:rounded-lg prose-img:shadow-md">...</div>

All available element modifiers

prose-headings:    h1, h2, h3, h4, th
prose-lead:        [class~="lead"]
prose-h1:
prose-h2:
prose-h3:
prose-h4:
prose-p:
prose-a:
prose-blockquote:
prose-figure:
prose-figcaption:
prose-strong:
prose-em:
prose-kbd:
prose-code:
prose-pre:
prose-ol:
prose-ul:
prose-li:
prose-table:
prose-thead:
prose-tr:
prose-th:
prose-td:
prose-img:
prose-video:
prose-hr:

Remove prose from a child element

  
<div class="prose">
  <p>Styled by prose</p>
  <div class="not-prose">
    <!-- Nothing here gets prose styles -->
    <p>Unstyled</p>
  </div>
</div>

Responsive prose

  
<div class="prose md:prose-lg xl:prose-xl">...</div>

Custom configuration

Override defaults in tailwind.config.js:

  
theme: {
  extend: {
    typography: {
      DEFAULT: {
        css: {
          color: '#333',
          a: {
            color: '#3182ce',
            '&:hover': {
              color: '#2c5282',
            },
          },
          h1: {
            fontWeight: '800',
          },
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          },
        },
      },
    },
  },
},

Remove the backtick quotes around code by setting code::before and code::after content to empty strings (shown above).

Common patterns

CMS/WYSIWYG output

  
<article class="prose prose-lg prose-slate max-w-none dark:prose-invert">
  ## Install

```bash
npm install -D @tailwindcss/typography

  
// tailwind.config.js
plugins: [require('@tailwindcss/typography')]