在我的NextJS应用程序中,我使用<h1>
标记文本并将其 Package 在<div>
中,但当我尝试为文本应用颜色时,它不起作用。我甚至添加了我的global.css
,但它抛出一个错误。
<div className="mt-2 flex justify-start items-center text-2xl font-bold text-gray-300">
<Image
src={Logo}
width={40}
height={40}
/>
<h1>some text here</h1>
</div>
上面的代码不会抛出错误,但它也不会将样式应用于文本。
styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
body{
@apply bg-[#06202A] text-gray-300;
}
}
在基础层(上图)中应用样式会引发以下错误。
对不起,您访问的页面不存在。如果text-gray-300
是一个自定义类,请确保它是在@layer
指令中定义的。
tailwind.config.js
@type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
colors: {
'main-bg-color': '#02172F',
'text-gray-color': '#fff'
},
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
为什么不管用?
2条答案
按热度按时间zsbz8rwp1#
您正在使用新添加的颜色替换默认颜色。要添加颜色,但保留默认值,您应该将新颜色放置在
extend
属性中。此外,Tailwind 3.0+中不再需要
mode
设置。如果你还在使用V2,我建议你升级。如果你因为某些原因不能升级,我想指出的是,Tailwind 2和3之间的默认颜色类是不同的,你必须参考正确版本的文档来获得正确的颜色设置。xfyts7mz2#
我已经阅读了tailwindcss配置在nextjs和我看到,顺风配置文件是不同的,如果你选择.src文件夹或不当npx创建下一个应用程序。这解决了我的问题:https://tailwindcss.com/docs/guides/nextjs
],