Next.js中Tailwind CSS类无法生效问题求助

针对你的情况，以下是几个关键排查点和修复步骤：

1. 修正 PostCSS 配置文件名 #

你的配置文件名为 postcss.config，但正确的文件名应该是 postcss.config.js。Next.js 只会识别带 .js 后缀的 PostCSS 配置文件，文件名错误会导致 Tailwind 无法被 PostCSS 处理。

2. 完善 Tailwind 内容扫描路径 #

tailwind.config.js 中的 content 字段需要覆盖所有使用 Tailwind 类的文件，当前配置仅匹配 pages 根目录下的文件，未包含子目录。更新为：

module.exports = {
  content: [
    "./pages/**/*.{html,js,jsx}", // 匹配 pages 下所有子目录的文件
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 调整全局样式文件的指令写法 #

推荐使用 Tailwind 官方的 @tailwind 指令替代 @import，修改 global.css 为：

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

4. 确保全局样式已在 _app.js/tsx 中导入 #

Next.js Pages Router 必须在 pages/_app.js（或 _app.tsx）中导入全局样式文件，否则 Tailwind 的基础样式不会加载。示例代码：

import '../styles/global.css'; // 根据你的文件实际路径调整

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

最后一步：重启开发服务器 #

修改配置文件后，需要停止当前的 npm run dev 进程，重新启动才能让新配置生效。

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