Markdown styles not getting loaded in Nuxt + Vue project

Question

I am working on a Vue + Nuxt + Tailwind project and using the marked library to convert a text into markdown.

The issue is that some styles like "Headings" and "Link" are loading properly, while some basic styles like "bold", "italics" are working fine.

For example:

• When I use "*hello* world", it gets converted to "hello world".
• When I use "# hello world", it does not increase the size of the text.
• When I use "[google](https://google.com)", it does create a link, but the link is not blue colored.

Not sure what the issue is here. If any more details are required, please let me know.

Answer 1

The solution to this was using Tailwind CSS's typography plugin.

Here are the steps to be followed:

Install the plugin first.

Using npm

npm install @tailwindcss/typography

Using Yarn

yarn add @tailwindcss/typography.

Then add the plugin to your tailwind.config.js file:

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

Then add the prose class to the element where you are displaying the markdown.

<div class="prose" v-html="cleanedMarkdown"></div>.

This provided the needed formatting for the markdown.