Tailwind CSS在/pages目录失效但/app目录正常，求排查原因？

核心原因分析 #

你的Tailwind配置文件中，content字段里的./pages/*.{js,ts,jsx,tsx,mdx}规则仅匹配pages根目录下的文件。从文件夹结构来看，/pages目录下存在api、auth、dashboard等子目录，这些子目录中的文件不会被当前配置扫描到，导致Tailwind无法为这些文件内的类名生成对应样式。

解决方案 #

修改tailwind.config.js中的content配置，将pages的匹配规则改为递归匹配所有子目录及文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}', // 用**递归匹配pages下所有层级的文件
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './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: [],
}

额外排查点 #

• 确认/pages目录下的页面文件已正确引入全局Tailwind样式（通常在_app.tsx/_app.jsx中导入包含@tailwind base; @tailwind components; @tailwind utilities;的样式文件）
• 修改配置后重启开发服务器，Tailwind配置变更需要重启才能生效
• 检查/pages中组件的Tailwind类名是否存在拼写错误

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