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

Question

在我的 NextJS 应用程序中，我使用<h1>文本标签并将其包装在 a 中，<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>

上面的代码不会引发错误，但它也不会将样式应用于文本。

样式/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/globals.css 该类text-gray-300不存在。如果text-gray-300是自定义类，请确保它是在@layer指令中定义的。

tailwind.config.js

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base{
        body{
            @apply bg-[#06202A] text-gray-300; 
        }
    }

postcss.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: [],
    }

为什么这不起作用？

Answer 1

您正在用新添加的颜色替换默认颜色。要添加颜色但保留默认值，您应该将新颜色放置在属性中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: [],
}

此外，modeTailwind 3.0+ 中不再需要该设置。如果您仍在使用 V2，我建议您尽可能升级。如果您由于某种原因无法升级，我想指出的是，Tailwind 2 和 3 之间的默认颜色类别是不同的，您必须参考正确版本的文档以获得正确的颜色设置。

• V2：https://v2.tailwindcss.com/docs/customizing-colors
• V3： https: //tailwindcss.com/docs/customizing-colors