How to Use the TailwindCSS Typography Plugin
August 13, 2021
|
––– views(Updated on February 20, 2022)
August 13, 2021
|
––– views(Updated on February 20, 2022)
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.
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.
To install the plugin in your project, simply run the following command:
BASH# Using npmnpm install @tailwindcss/typography# Using Yarnyarn add @tailwindcss/typography
Once the package has installed, add the plugin to your tailwind.config.js file:
JAVASCRIPT// tailwind.config.jsmodule.exports = {theme: {// ...},plugins: [require('@tailwindcss/typography'),// ...],}
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.
HTML<article class="prose lg:prose-xl"><h1>A Long-Expected Party</h1><p>When Mr. Bilbo Baggins of Bag End announced that he would shortly becelebrating his eleventy-first birthday with a party of special magnificence,there was much talk and excitement in Hobbiton.</p><!-- ... --></article>
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:
The colors can be customized even further by tinkering with the API in your tailwind.config.js file.
The TailwindCSS Typography paints blocks of text with beautiful styles thanks to an easy-to-use solution crafted by professional designers.
For a full list of official TailwindCSS plugins, check out the Tailwind documentation website.
👍
❤️
👏
🎉
Share this article
A periodic update about my life, recent blog posts, how-tos, and discoveries.
No spam - unsubscribe at any time!