Tailwind Typography Plugin

Styling Raw HTML Content

WordPress sends content as raw HTML strings. Because Tailwind's preflight resets all default browser styles, your headings and lists will look like plain text. The Typography plugin solves this.

1. Installation

npm install -D @tailwindcss/typography

2. Configuration

Add the plugin to your `tailwind.config.ts`:

plugins: [
  require('@tailwindcss/typography'),
]

3. Usage

Wrap your dynamic content in a container with the `prose` class:

<div className="prose prose-lg lg:prose-xl">
  <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
</div>

4. Benefits

The `prose` class automatically applies beautiful spacing, font weights, and colors to any HTML element inside it (h1, h2, blockquote, pre, etc.), ensuring your blog looks professional with zero manual CSS writing.