The typography plugin for long text

A product description, a blog post or the delivery terms often come from a CMS or Markdown as ready HTML. You cannot put classes on every <h2> and <p> in such text. The official @tailwindcss/typography plugin solves this with a single prose class: it styles everything inside the block.

Why you need it

Here is what happens to such text without the plugin:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<article>
  <h2>How to choose headphones</h2>
  <p>First decide where you will wear them.</p>
  <ul>
    <li>For travel — with noise cancelling.</li>
    <li>For sport — with water resistance.</li>
  </ul>
</article>

Preflight removed the heading size, the margins and the list bullets — the text has merged into one mass. The browser script cannot load plugins from npm, so the code below is for a project.

Installing

Install the plugin and add it with the @plugin directive in src/style.css:

npm install -D @tailwindcss/typography

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

The prose class

Put prose on the text wrapper. In a product page template, for example index.html or a backend template, it looks like this:

<article class="prose">
  <h2>How to choose headphones</h2>
  <p>First decide where you will wear them.</p>
  <ul>
    <li>For travel — with noise cancelling.</li>
    <li>For sport — with water resistance.</li>
  </ul>
</article>

In a project with the plugin the heading becomes large, paragraphs get spacing and the list gets bullets. The preview under the code does not load Tailwind, so it shows the browser default styles rather than the plugin styling. The block width is limited to about 65 characters per line — long text is easier to read that way.

Modifiers

Class	What it does
`prose-sm`, `prose-lg`, `prose-xl`	Changes the overall text size
`prose-gray`, `prose-slate`, `prose-zinc`	Picks a gray palette
`dark:prose-invert`	Light text for the dark theme
`max-w-none`	Removes the width limit
`prose-a:text-indigo-600`	Styles every link inside
`not-prose`	Turns styling off for a nested block

Element variants like prose-a:, prose-headings:, prose-img: let you adjust specific tags without touching the CMS HTML: prose prose-lg prose-headings:font-semibold.

Common mistake

Putting prose on the whole page or on a layout with cards. The plugin then styles your buttons, links and menu lists as parts of an article — extra margins and underlines appear. Put prose only on the block with text from a CMS or Markdown, and if the article contains your own component, wrap it in not-prose.

Thanks for reading!