Expo项目中TailwindCSS无法识别指定目录下新增组件样式

排查及解决步骤 #

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

Tailwind会缓存已扫描的文件，新增组件可能未被纳入扫描范围：

• 关闭当前Expo开发服务器
• 删除项目根目录下的.expo文件夹
• 执行命令重启服务：npx expo start -c（-c参数用于强制清除缓存）

2. 确认文件路径匹配 #

检查新增的Home.js是否确实位于./screens/目录下（包括子目录），当前配置的./screens/**/*.{js,jsx,ts,tsx}会匹配该目录下所有层级的对应扩展名文件，若文件路径错误则会被遗漏。

3. 验证组件引入状态 #

确保Home.js已被正确导入到App组件或导航配置中。虽然Tailwind的content配置会扫描指定路径文件，但如果组件未被项目实际引用，JIT模式可能会忽略未使用的样式规则。

4. 检查Tailwind类名使用正确性 #

确认Home.js中正确使用React的className属性而非原生class，且类名拼写无误：

export default function Home() {
  return <div className="text-blue-500 text-xl p-4">Home Screen</div>;
}

5. 确认配置文件已保存 #

修改tailwind.config.js后务必保存文件，未保存的配置不会生效。

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