Next.js全局CSS仅在page.tsx生效，组件引入时失效求助

问题根源 #

这是Tailwind CSS的内容扫描范围配置不全导致的。在Next.js App Router模式下，Tailwind需要明确指定哪些文件包含要解析的CSS类名，才能在globals.css中生成对应的样式规则。

当你把HeaderTop组件代码直接放到page.tsx时，page.tsx在默认的Tailwind扫描路径内，类名被正常解析，样式生效；但把组件放到独立的components文件夹或layout.tsx中时，如果这些路径没被加入tailwind.config.js的content数组，Tailwind不会解析这些文件里的类名，自然不会生成对应的样式代码，导致样式失效。

解决步骤 #

1. 打开项目根目录的tailwind.config.js文件
2. 修改content数组，确保覆盖app目录下所有文件和components目录下所有组件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // 覆盖app目录下所有文件（包括layout.tsx）
    './components/**/*.{js,ts,jsx,tsx,mdx}', // 覆盖components目录下所有组件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 保存文件后，重启Next.js开发服务器，此时layout.tsx中引入的HeaderTop组件样式就会正常生效。

补充说明 #

清除浏览器缓存没用的原因是：Tailwind CSS是在构建阶段生成最终的CSS文件，而非运行时动态解析类名。只有让Tailwind扫描到包含类名的文件，才能生成对应的样式规则，重启服务器是为了让Tailwind重新执行扫描和构建流程。

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