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}}/> 
export async function getStaticProps(){
    let content = fs.readFileSync('./_posts/','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