The global CSS header element in Next.js is not being applied to parsed markdown files; instead, it is being replaced by Tailwind CSS

Question

The global CSS header element in Next.js is not being applied to parsed markdown files; instead, it is being replaced by Tailwind CSS

After attempting to convert Markdown into HTML, I encountered an issue. While the markdown parsed correctly, the rendered output did not match my expectations. Specifically, I expected the headers to automatically appear bold and with a larger font size, but they did not.

Upon inspecting the browser, I noticed that the font-size and font-weight properties were overridden by values inherited from tailwind.css:1. When I manually disabled this inheritance, the headers displayed as intended per my global CSS settings. I am confused about why the tailwind css is replacing the font-size and font-weight.

Here is a snippet of my global CSS styling:

@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;
}

The problematic code resides in the following page:

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 guidance on how to resolve this issue would be greatly appreciated.

css next.js tailwind-css

Answer 1

Answer №1

I encountered a similar issue when I added Tailwind to my NextJS project and it affected the Markdown formatting. Despite using gray-matter and markdown-it for parsing markdown, Tailwind was overriding the styles in my project. To resolve this, I had to make changes in the globals.css file:

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

To solve this problem, I followed the steps outlined in the Tailwind documentation at https://tailwindcss.com/docs/installation and installed the Tailwind Typography plugin from https://tailwindcss.com/docs/typography-plugin

Here is how you can include them in your project:

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

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

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

Finally, to ensure that the Markdown formatting is applied correctly from your .md files, remember to include the "prose" class. Within the pages directory where your markdown files are parsed, add className="prose" to the wrapping tags like div or article.

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>
              </>
            )
        })}
    </>
)

For more information on parsing Markdown files with Next JS, check out this helpful guide: https://dev.to/alexmercedcoder/2022-tutorial-on-creating-a-markdown-blog-with-nextjs-3dlm

Answer 2

I encountered a similar issue when I added Tailwind to my NextJS project and it affected the Markdown formatting. Despite using gray-matter and markdown-it for parsing markdown, Tailwind was overriding the styles in my project. To resolve this, I had to make changes in the globals.css file:

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

To solve this problem, I followed the steps outlined in the Tailwind documentation at https://tailwindcss.com/docs/installation and installed the Tailwind Typography plugin from https://tailwindcss.com/docs/typography-plugin

Here is how you can include them in your project:

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

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

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

Finally, to ensure that the Markdown formatting is applied correctly from your .md files, remember to include the "prose" class. Within the pages directory where your markdown files are parsed, add className="prose" to the wrapping tags like div or article.

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>
              </>
            )
        })}
    </>
)

For more information on parsing Markdown files with Next JS, check out this helpful guide: https://dev.to/alexmercedcoder/2022-tutorial-on-creating-a-markdown-blog-with-nextjs-3dlm

Answer 3

Answer №2

I discovered the solution after coming across this insightful article.

To summarize, I needed to establish a new class and incorporate my modifications within it. The overall CSS should be adjusted as follows:

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

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

Then, apply the newly created class to the parsed markdown.

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

Answer 4

I discovered the solution after coming across this insightful article.

To summarize, I needed to establish a new class and incorporate my modifications within it. The overall CSS should be adjusted as follows:

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

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

Then, apply the newly created class to the parsed markdown.

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

The global CSS header element in Next.js is not being applied to parsed markdown files; instead, it is being replaced by Tailwind CSS

Answer №1

Answer №2

Similar questions

The upcoming page.tsx export force-dynamic is failing to render dynamically

Tips for showcasing a table generated from various input types on a separate page after pressing the submit button

Safari 5 experiences delays with JQuery and CSS3 animations

Tips for displaying Next.js dynamic paths on a static S3/CloudFront website

Combining and organizing user authentication data from nextauth.js provider and credentials in a session (nextjs)

Update Bootstrap Vue to change the colors of the breadcrumbs

What is the best way to eliminate the gap between spans in Bootstrap?

How to instantly return progress bar to zero in bootstrap without any animations

Tips for creating and exporting a Next.js application that utilizes getServerSideProps functionality

The behavior of the CSS Position property is exhibiting unique characteristics when used in

"An error occured on the server: ReferenceError - 'self' is not defined" when utilizing the powerbi-client-react library in a TypeScript project

Can PushState be used to Ajaxify CSS files?

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Show flexibility in the grandchildren of a row layout

Top approach to generate and store CSRF tokens for OAuth requests in a Node.js environment

The hover functionality fails to activate when a z-index is applied

Encountering CORS issue specifically on Safari, yet functioning without any trouble on other

Issue encountered while attempting to run Next.js application. Halts abruptly shortly after initialization

Why won't hover over function properly in separate divs for two items?

Tips for effectively utilizing CSS classes with current-device