next.js – nextjs global css header element doesn’t apply to a parsed markdown, replaced by tailwindcss instead


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.



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here