Typography Plug-in

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.