[英]Tailwind classes on HTML don't work while those from the CSS file work
So, if the classes work as expected the page is supposed to look like this:因此,如果类按预期工作,则页面应该如下所示:
But instead, it looks like this:但相反,它看起来像这样:
This is the code in the jsx file:这是 jsx 文件中的代码:
<header
className={"p-2 bg-red-500"}
>
<h1>{postData.title}</h1>
<p>{postData.date}</p>
<img
src={formatImgSrc(postData.thumbnail)}
/>
</header>
<div
className={"cms-content"}
dangerouslySetInnerHTML={
{ __html: postData.contentHtml }
}>
</div>
And here's the css file in /styles/globals.css:这是 /styles/globals.css 中的 css 文件:
@tailwind base;
@tailwind components;
@tailwind utilities;
.cms-content > p {
@apply mt-6 bg-red-500;
}
As you can see, the classes that I put on HTML don't get applied while those from the CSS file work just fine .如您所见,我放在 HTML 上的类没有得到应用,而 CSS 文件中的类工作得很好。 I really don't understand why.我真的不明白为什么。
Here are more files for reference.这里有更多文件供参考。
next.config.js next.config.js
module.exports = {
webpack: (cfg) => {
cfg.module.rules.push(
{
test: /\.md$/,
loader: 'frontmatter-markdown-loader',
options: { mode: ['react-component'] }
}
)
return cfg;
}
}
postcss.config.js postcss.config.js
module.exports = {
plugins: {
"@tailwindcss/jit": {},
autoprefixer: {},
}
}
tailwind.config.js tailwind.config.js
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Try moving the.cms-content class above the @tailwind utilities import.尝试将.cms-content class 移到@tailwind 实用程序导入上方。 Those imports go in order and you might be overriding your utilities.这些导入 go 按顺序排列,您可能会覆盖您的实用程序。 See this tailwind tutorial on creating your own classes: https://youtu.be/TrftauE2Vyk?t=127请参阅有关创建自己的类的顺风教程: https://youtu.be/TrftauE2Vyk?t=127
add your folder this:添加您的文件夹:
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./your_folder/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.