How to use @tailwindcss/typography to display markdown content

Learn how to use @tailwindcss/typography package to display markdown content to page beautifully.

Install @tailwindcss/typography package

npm install @tailwindcss/typography --save

Load @tailwindcss/typography plugin in tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: [require("@tailwindcss/typography")]
};

Add ‘prose’ class to parent html tag

<div class="prose prose-sm lg:prose-lg xl:prose-xl">
  ## Hello World
</div>

[Optional] Add ‘max-w-none’ class to override max-width

<div class="prose prose-sm lg:prose-lg xl:prose-xl max-w-none w-full">
  ## Hello World
</div>