How to Use the TailwindCSS Typography Plugin

Tailwind, a utility-first CSS library that provides unopinionated classnames for rapid UI style creation, has taken the front-end development scene by storm and has been included in the best CSS frameworks in 2020.

While the adoption rate for TailwindCSS has been growing exponentially, I'm shocked that more people aren't aware of the various plugins that available via a simple NPM download.

In today's brief article, I'll introduce the Tailwind Typography plugin and showcase its features and explain why it may be a good fit for your next TailwindCSS project.

Why the TailwindCSS Typography Plugin?

Styling text in TailwindCSS is as simple as adding a few utility classes to an h1 element to bump up the size, increase the font weight and slap on a specific color. Because most website content is made up of text, templates can quickly become littered with lots of text utility classes.

Extracting repeated code into template partials or JavaScript components can help keep your templates more clean, but as projects grow, maintenance becomes painful.

The team at TailwindLabs has identified this pain point and created an easy-to-use plugin that extracts text styles into a design system through the Tailwind Typography plugin.

Installing the Tailwind Typography Plugin

To install the plugin in your project, simply run the following command:

1# Using npm
2npm install @tailwindcss/typography
3
4# Using Yarn
5yarn add @tailwindcss/typography

Once the package has installed, add the plugin to your tailwind.config.js file:

1// tailwind.config.js
2module.exports = {
3  theme: {
4    // ...
5  },
6  plugins: [
7    require('@tailwindcss/typography')
8    // ...
9  ]
10};

How to Use the Tailwind Typography Plugin

With the plugin declared in your Tailwind configuration, the new prose utility classes are available for use to add logical typography styles to your template.

The prose utility classes include five different size modifiers, ranging from prose-sm to prose-2xl. Each size variant has different rules regarding the relationship between font sizes, heading spaces, padding and more to provide a beautiful reading experience for the user.

1<article class="prose lg:prose-xl">
2  <h1>A Long-Expected Party</h1>
3  <p>
4    When Mr. Bilbo Baggins of Bag End announced that he would shortly be
5    celebrating his eleventy-first birthday with a party of special
6    magnificence, there was much talk and excitement in Hobbiton.
7  </p>
8  <!-- ... -->
9</article>

Tailwind Color Modifiers in the Typography Plugin

Aside from the size modifiers, the Tailwind Typography plugin also provides flexibility when using anchor tags in your markup. Out-of-the-box, anchor elements are styled in a dull dark gray with the text underlined. To change the color of the anchor text, use one of the seven provided color modifiers listed below:

prose-red
prose-yellow
prose-green
prose-blue
prose-indigo
prose-purple
prose-pink

The colors can be customized even further by tinkering with the API in your tailwind.config.js file.

Conclusion

The TailwindCSS Typography plugin paints blocks of text with beautiful styles thanks to an easy-to-use solution crafted from professional designers.

For a full list of official TailwindCSS plugins, check out the Tailwind documentation website.