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.

CodePudding user response：

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,
  },
....
}

source :https://github.com/tailwindlabs/tailwindcss/issues/1460

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.

CodePudding user response：

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 v-html="cleanedMarkdown"></div>.

This provided the needed formatting for the markdown.