@tailwindcss/typography

A first-party plugin for providing beautiful typographic defaults.

The @tailwindcss/typography plugin adds a set of customizable prose classes that you can use to add beautiful typographic defaults to any vanilla HTML, like the output you’d get after parsing some Markdown, or content you pull from a CMS.

  1. <article class="prose lg:prose-xl">
  2.   <h1>Garlic bread with cheese: What the science tells us</h1>
  3.   <p>
  4.     For years parents have espoused the health benefits of eating garlic bread with cheese to their
  5.     children, with the food earning such an iconic status in our culture that kids will often dress
  6.     up as warm, cheesy loaf for Halloween.
  7.   </p>
  8.   <p>
  9.     But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
  10.     springing up around the country.
  11.   </p>
  12.   <!-- ... -->
  13. </article>

It provides sensible defaults for everything you might expect like:

  • Basic typography
  • Heading styles
  • Tables
  • Ordered and unordered lists
  • Horizontal rules
  • …and more

Check out the live demo and read the documentation on GitHub to learn more.

← Screen Readers