使用NextJS和Tailwind CSS时文本颜色不变

qoefvg9y  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(126)

在我的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: {},
      },
    }

为什么不管用?

zsbz8rwp

zsbz8rwp1#

您正在使用新添加的颜色替换默认颜色。要添加颜色,但保留默认值,您应该将新颜色放置在extend属性中。

module.exports = {
  mode: "jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'main-bg-color': '#02172F',
        'text-gray-color': '#fff'
      },
    },
  },
  plugins: [],
}

此外,Tailwind 3.0+中不再需要mode设置。如果你还在使用V2,我建议你升级。如果你因为某些原因不能升级,我想指出的是,Tailwind 2和3之间的默认颜色类是不同的,你必须参考正确版本的文档来获得正确的颜色设置。

xfyts7mz

xfyts7mz2#

我已经阅读了tailwindcss配置在nextjs和我看到,顺风配置文件是不同的,如果你选择.src文件夹或不当npx创建下一个应用程序。这解决了我的问题:https://tailwindcss.com/docs/guides/nextjs

content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",

],

相关问题