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
bash
npm install @tailwindcss/typography --save
Load @tailwindcss/typography plugin in tailwind.config.js
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>