Tailwind CSS Typography

Add typographic defaults to any vanilla HTML you don’t control, such as HTML rendered from Markdown, or pulled from a CMS.

6th July 2022

Time to read: 1 min

Installation

Install the plugin from npm:

npm install -D @tailwindcss/typography

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Wrap prose class around markdown pages:

<div className='prose'>
  <MDXRenderer>
    {data.mdx.body}
  </MDXRenderer>
</div>

To see what it looks like in action, check out the live demo on Tailwind Play.

Use element modifiers to customize the style of individual elements in your content directly in your HTML:

<article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">
  {{ markdown }}
</article>

For full documentation, visit typography-plugin.