about uscontact

How to use @tailwindcss/typography to display markdown content

Category:
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
</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>
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu