nextjs global css header 元素不适用于解析的降价，取而代之的是 tailwindcss

Question

我试图将 markdown 解析为 html。 markdown 确实按预期进行了解析，问题是它没有按照我的预期呈现。我希望 header 自动加粗并具有更大的字体大小，但它没有。

我在浏览器上检查过 font-size 和 font-weight 交叉的属性，活动属性的值继承自 tailwind.css:1。如果我手动取消选中它，header 会更改为我在全局 css 上设置的内容。我只是不明白 tailwind css 在哪里替换了 font-size 和 font-weight

我的全局 css 如下所示

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

这是我遇到问题的页面

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

感谢任何指点。

Answer 1

我找到了解决办法。这个articles解释的真好。

简而言之，我需要创建一个新的 class 并将零钱放入其中。 global CSS 必须改成这样

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

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

并将 class 应用于已解析的 markdown。

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

Answer 2

我在将 Tailwind 安装到我的项目后遇到了类似的问题，即 NextJS 无法正确解析 Markdown 格式。请注意，我使用 gray-matter 和 markdown-it 来解析项目中的降价，一旦我从 globals.css[= 中禁用以下内容，我验证了 Tailwind 正在覆盖降价格式33=] 文件:

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

为了解决这个问题，我安装了 Tailwind https://tailwindcss.com/docs/installation 和 Tailwind Typography 插件 https://tailwindcss.com/docs/typography-plugin

将其安装到您的项目中：

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

在您的 tailwind.config.js 文件中添加插件：

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

最后，要正确地从您的 .md 文件中获取降价格式，您需要添加“散文”class。 pages 目录中用于解析 markdown 文件的文件，您需要将 className="prose" 添加到您用 div、文章等
包装内容的标签
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> </> ) })} </> )

这里有一个很棒的 how-to 用于使用 Next JS 解析您的降价文件 https://dev.to/alexmercedcoder/2022-tutorial-on-creating-a-markdown-blog-with-nextjs-3dlm

nextjs global css header 元素不适用于解析的降价，取而代之的是 tailwindcss

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

css

next.js

tailwind-css