Markdown styles not getting loaded in Nuxt + Vue project

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.

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.