Next.js Pages Router下Tailwind样式未生效问题求助

问题排查与修复步骤： #

1. 修正tailwind.config.js中的无效路径 #

你的配置里存在一行错误路径：./src/pages/.{js,ts,jsx,tsx,mdx}，多余的点会导致Tailwind无法正确识别pages根目录下的文件。修改后的content配置如下：

content: [
  "./src/**/*.{html,js,jsx,ts,tsx,mdx}",
  "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
  "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],

./src/**/*已能覆盖src目录下所有文件，明确写出pages和app目录可进一步确保匹配规则的准确性。

2. 为Pages Router全局注入Tailwind样式 #

App Router通过根layout.tsx全局引入样式，但Pages Router必须在pages/_app.tsx中导入Tailwind基础样式文件（通常是globals.css）。示例代码：

import '../styles/globals.css'; // 根据项目实际路径调整
import type { AppProps } from 'next/app';

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

如果globals.css中缺少Tailwind核心指令，需要补充：

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

3. 重启开发服务器 #

修改Tailwind配置或样式文件后，必须重启npm run dev或yarn dev，确保新配置完全生效。

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