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

qoefvg9y 于 2023-10-18 发布在其他

关注(0)|答案(2)|浏览(133)

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

为什么不管用？

next.js

来源：https://stackoverflow.com/questions/73240805/text-color-not-changing-using-nextjs-with-tailwind-css

2条答案

按热度按时间

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之间的默认颜色类是不同的，你必须参考正确版本的文档来获得正确的颜色设置。

赞(0）回复(0）举报 2023-10-18

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}",

]，

赞(0）回复(0）举报 2023-10-18

我来回答

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

2条答案

相关问题

热门标签

最新问答