Beautiful Article Layouts with @tailwindcss/typography

Writing long-form content with Tailwind CSS is straightforward once you add the @tailwindcss/typography plugin.

Installation

npm install @tailwindcss/typography

Then register it in your tailwind.config.ts:

plugins: [require("@tailwindcss/typography")]

Usage

Wrap your article body in a prose class:

<article className="prose prose-neutral lg:prose-lg max-w-none">
  {/* your HTML or rendered Markdown here */}
</article>

Customisation

The plugin ships sensible defaults but every token is configurable. Common tweaks:

• prose-slate — cooler neutral palette
• prose-invert — dark mode version
• max-w-prose — constrain line length to ~65ch

You can also target specific elements:

.prose h2 {
  @apply text-indigo-700;
}

Pair it with Tailwind's responsive modifiers (lg:prose-lg) and you have a fully responsive reading experience in a few class names.