Typography Plugin

There are a number of official plugins you can add to Tailwind CSS. Let's take a look at the one called the Typography Plugin.

Typography Plugin

Installing

npm install -D @tailwindcss/typography

Config

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

To use it you have to install it with NPM into your build process.

Once you do that, you can modify the config file to add it to your project.

The Prose Class

  • Typographic Defaults
  • Pre-written HTML
  • Markdown Friendly

What you get with this plugin is a special class called prose. The prose class gives you some typographic defaults that look great.

This works really well for content where you don't have a lot of control over the HTML that has been auto generated through some process.

For example this works great with markdown content or perhaps content from some database that already has HTML in it. A lot of blogging platforms allow users to write in a markdown format and auto-generate HTML for you, which you then have no control over.

Color & Size

  • prose(-COL)
    • COL: gray slate zinc neutral stone
  • prose-SIZ
    • SIZ: sm base lg xl 2xl

Because the content is usually text, there are modifiers to allow you to target specific neutral colors in the palette.

There are also modifiers for each of the breakpoints and as you'll see in our example, each size optimizes how the typography looks.

Prose Modifiers

  • prose-dark
  • prose-UTL
    • UTL:
      prose-headings prose-lead prose-h1 prose-h2 prose-h3 prose-h4 prose-p prose-a prose-blockquote prose-figure prose-figcaption prose-strong prose-em prose-code prose-pre prose-ol prose-ul prose-li prose-table prose-thead prose-tr prose-th prose-td prose-img prose-video prose-hr

You have a few additional modifiers you can use to control how different elements inside the prose segment are rendered.

For this example, I'm going to go to the build tool process we created all the way in the first chapter.

prose lg:prose-lg prose-h1:mt-4 prose-h1:mb-0 prose-h1:text-indigo-500 prose-h2:text-orange-500 prose-p:first-of-type:mt-2