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.

Robin

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.

Robin

This is great thanks! – Illiteracy

I was fighting this issue for hours. Thanks for the comment, man. I can add this documentation resources in addition to the github link you provided: tailwindcss.com/docs/typography-plugin – Alpenhorn

Worked for me, thanks. I'm very interested in why the styling does not work out of the box as the docs say, does tailwind do something to the default markdown styling? – Limitative

Answer 2

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.

Illiteracy

Option 1 wont work because it will remove all the core plugins.. – Illiteracy

If u inspect your markdown output, the link wont be blue because of the same reason.. – Illiteracy

for a link css a:link { color: blue !important; background-color: transparent; text-decoration: none; } – Illiteracy

Thanks Kaartik. Adding custom CSS works, but I was wondering if there was a simpler way to do this. For example, lists also don't work here. – Robin