NextJS中Tailwind样式在组件中不生效但page.tsx正常的问题求助

问题场景 #

在 NextJS 项目中集成 Tailwind CSS 后，page.tsx 中的 Tailwind 样式可正常渲染，但自定义的 Menu.tsx 组件内的样式完全不生效。

相关代码与配置 #

Menu.tsx #

export default function Menu() {
  return <div className="bg-red" >
    <div className="text-red">
      Create Todo
    </div>
    <div>
      Favorites
    </div>
  </div >
}

tailwind.config.ts #

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

next.config.js #

const nextConfig = {}

module.exports = nextConfig

global.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

排查与解决步骤 #

1. 修正无效的 Tailwind 类名 #

Tailwind CSS v3 默认不提供无权重后缀的颜色类（如 bg-red、text-red），必须使用带数值后缀的标准类名（如 bg-red-500、text-red-100）。你当前使用的 bg-red 和 text-red 属于无效类，Tailwind 不会生成对应的样式代码，这是样式不生效的核心原因。

修改后的 Menu.tsx：

export default function Menu() {
  return <div className="bg-red-500" >
    <div className="text-red-100">
      Create Todo
    </div>
    <div>
      Favorites
    </div>
  </div >
}

2. 确认组件路径被 Tailwind 扫描 #

检查 Menu.tsx 的实际存放位置：

• 若组件在 src/components/ 目录下，当前 tailwind.config.ts 的 content 配置已覆盖该路径，无需调整；
• 若组件存放在其他目录（如 app/components/），需将对应路径添加到 content 数组中。

3. 验证全局样式导入正确性 #

确保 layout.tsx 中全局样式的导入路径与文件实际位置匹配：

import './globals.css'

4. 清除缓存并重启服务 #

执行以下命令清除项目缓存，然后重启开发服务：

npm run build
npm run dev

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