nextjs global css header element doesn't apply to a parsed markdown, replaced by tailwindcss instead

Question

I tried to parse markdown into html. the markdown does parsed as expected, the problem is it doesn't render to what I expected. I expected the header to be automatically bolded and have bigger font size, but it doesn't.

I checked on browser and the font-size and font-weight properties where crossed and the active one have value inherit from tailwind.css:1. If I manually uncheck it, the header does change to what I set on global css. I just don't understand where does the tailwind css replaced the font-size and font-weight

my global css is like below

@tailwind base;
@tailwind components;
@tailwind utilities;

h1,h2,h3,h4 {
    font-weight: 700;
    line-height: 1.3333333;
    letter-spacing: -.025em;
    padding: 1em;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1em;
}

and here is the pages where I have trouble with

import Navbar from '../components/Navbar'
const showdown  = require('showdown');
const fs  = require("fs");

const sop = (props) =>{
    return (
        <>
        <Navbar />
        <div className="flex flex-col items-center ">
            <div className="w-2/4">
                <div dangerouslySetInnerHTML={{ __html:props.body}}/> 
            </div>
        </div>
        </>
    )
}
export async function getStaticProps(){
    let content = fs.readFileSync('./_posts/sop.md','utf8');
    let converter = new showdown.Converter();
    let html = converter.makeHtml(content);

    return {
       props : {body:html}
    }
}
export default sop

any pointer is appreciated.

Answer 1

I found out the solution. this articles explained really well.

In short, I need to create a new class and place my change inside it. The global CSS has to be changed into something like this

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

.parsedown h1{
  @apply text-2xl font-extrabold py-4
}
...

and apply the class on the parsed markdown.

//page.js
...
<div className="w-2/4 parsedown">
  <div dangerouslySetInnerHTML={{ __html:props.body}}/> 
</div>
...

Answer 2

I had a a similar issue with NextJS not correctly parsing the Markdown formatting once I installed Tailwind to my project. Take note that I used gray-matter and markdown-it to parse the markdown in project I verified that Tailwind was overriding the markdown format once I disabled the following from the globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

To work around this problem I installed Tailwind https://tailwindcss.com/docs/installation and the Tailwind Typography plugin https://tailwindcss.com/docs/typography-plugin

Install it into your project:

npm install npm install -D tailwindcss
npx tailwindcss init
npm install -D @tailwindcss/typography

Add the plugin in your tailwind.config.js file:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Lastly, to get the markdown formatting to come over from your .md files correctly you'll need to add the "prose" class. The file within the pages directory that parses up your markdown files, you'll need to add className="prose" to which tag you wrap content with div, article, etc

export default function Posts({posts}){  
  return (
    <>
      {posts.map((post, key) => {
            return (
              <>
                <div className="container" key={key}>
                  <article className="prose prose-base prose-slate mx-auto" key={key}>   
                      <div dangerouslySetInnerHTML={{ __html: md().render(content) }} />
                  </article>
                </div>
              </>
            )
        })}
    </>
)

Here's a great how-to for parsing your markdown files using Next JS https://dev.to/alexmercedcoder/2022-tutorial-on-creating-a-markdown-blog-with-nextjs-3dlm