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.

user_13714093 · Answer

Its because of the tailwind.css in tailwind, h1 - h6 headers dont work.

Option 1) add this to your tailwind.config.js:

module.exports = {
  corePlugins: {
    preflight: false,
  },
....
}

Option 2)Try adding custom css for h1..h6 in your css file.

https://www.w3schools.com/tags/tag_hn.asp copy the styles from here

Similarly try add custom css for other issues.

user_7266331 · Answer

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

Here are the steps to be followed:

Install the plugin first.

npm install @tailwindcss/typography

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.

.

This provided the needed formatting for the markdown.