Tailwind CSS Typography Using the Official Tailwind Typography Plugin (@tailwindcss/typography)

Tailwind CSS Beginner 1 min read

Using the Official Tailwind Typography Plugin (@tailwindcss/typography)

The @tailwindcss/typography plugin adds a prose utility class that applies beautiful typographic defaults to blocks of HTML content you do not control — such as Markdown-rendered blog posts, CMS content, or documentation pages. Without the plugin, you would need to style every h1, h2, p, ul, blockquote, code, and table element individually inside a content container. Applying prose to a container styles all its descendant elements with harmonious font sizes, spacing, and colours. Modifiers control the size: prose-sm, prose (default), prose-lg, prose-xl, and prose-2xl. The dark mode variant prose-invert switches all the colours to work on dark backgrounds. You can customise specific element styles with prose-headings:, prose-p:, prose-a:, prose-code:, prose-blockquote:, and similar component modifiers. The typography plugin is installed separately from Tailwind core and registered in tailwind.config.js under the plugins array. It is the recommended solution for long-form content rendering because maintaining typographic rhythm across headings, body text, lists, tables, and code blocks is complex and error-prone by hand. The plugin handles all the edge cases and has been refined over years of real-world use.

Example

# Install the typography plugin
npm install -D @tailwindcss/typography

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

<!-- Basic usage: wrap CMS/Markdown content in prose -->
<article class="prose lg:prose-xl max-w-none mx-auto px-4 py-8">
  <h1>Getting Started</h1>
  <p>This paragraph will be styled automatically with sensible font size,
     line height, and colour — no extra classes needed.</p>
  <h2>Installation</h2>
  <ul>
    <li>Step one: install the package</li>
    <li>Step two: add to config</li>
  </ul>
  <blockquote>
    <p>Utility-first CSS scales better than anything I've used.</p>
  </blockquote>
  <pre><code>npm install tailwindcss</code></pre>
</article>

<!-- Dark mode prose -->
<article class="prose dark:prose-invert lg:prose-lg max-w-3xl mx-auto">
  <!-- Same content renders well on both light and dark backgrounds -->
</article>

<!-- Custom prose overrides using component modifiers -->
<article class="prose
                prose-headings:font-extrabold prose-headings:text-indigo-900
                prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
                prose-code:bg-gray-100 prose-code:px-1 prose-code:rounded
                max-w-3xl mx-auto">
  Custom styled prose content
</article>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned