Typography Plug-in

Learn how to install Tailwind's typography plugin.

We'll cover the following

If we want some legible defaults for basic typography of long text on our page, Tailwind provides an official typography plugin.

Install the plug-in

To install the plug-in, first, we add the package:

$ yarn add @tailwindcss/typography

Configuration

Then, add it to the Tailwind configuration file, which now should have the following plugins section:

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

We use the typography plug-in by adding the CSS class .prose to any element, as shown below:

<article class="prose">
  All our text
</article>

To change the size, we use size modifiers, which we must use in conjunction with a class that already uses .prose, as shown below:

<article class="prose prose-sm">
  All our text
</article>

The base size is 1rem or 16 points. These are the size modifiers:

  • -sm 14pt
  • -lg 18pt
  • -xl 20pt
  • -2xl 40pt

Any Tailwind utilities we use will override the typography defaults.

Get hands-on with 1200+ tech skills courses.