How to use @tailwindcss/typography to display markdown content

Author: zemna
Date: April 17, 2021
Share this:

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

[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
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

Let's connect and create
something awesome together!
2023 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram