umma.dev

Typography in Tailwind has been tricky however recently a new plugin was launched! You no longer have to disable the default fonts on Tailwind or come up with a creative solution to manage fonts with Tailwind.

Tailwind Font Plugin

Tailwind has provided a prose set of classes which can be added to CSS elements.

Set Up

yarn add @tailwindcss/typography

or

npm install @tailwindcss/typography

In tailwind.config.js

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

Integrating Typography in an App

<article class="prose lg:prose-xl">
  <h1>Hello!</h1>
  <p>
    Example text!
  </p>
</article>

View the documentation here

View the blog post on Typgraphy plugin by Tailwind here