NextJS 结合 Tailwind CSS 文本颜色不生效问题排查

一、div上的text-gray-300未作用于h1的原因 #

Tailwind的text-*文本颜色类仅作用于当前元素的文本节点，不会自动被子元素继承。你的h1是div的独立子元素，因此div上的text-gray-300样式不会生效在h1上。

二、global.css中使用text-gray-300报错的原因 #

你在tailwind.config.js的theme.colors字段下直接定义了自定义颜色，这会完全覆盖Tailwind默认的颜色体系，包括自带的gray色系。原本的text-gray-300依赖默认的gray颜色配置，现在默认gray被替换为你自定义的两个颜色，导致该类不存在，触发报错。

对应解决办法 #

解决h1颜色不生效的问题

直接给h1添加text-gray-300类即可：

<div className="mt-2 flex justify-start items-center text-2xl font-bold">
    <Image 
        src={Logo}
        width={40}
        height={40}
    />
    <h1 className="text-gray-300">some text here</h1>
</div>

解决global.css报错的问题

若要保留Tailwind默认颜色（含gray）并添加自定义颜色，需将自定义颜色放在theme.extend.colors下，而非直接覆盖theme.colors：

/** @type {import('tailwindcss').Config} */
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: [],
}

内容的提问来源于stack exchange，提问作者Mohammed Bekele