Tailwind CSS仅在App.js生效，其他文件夹失效问题排查求助

我遇到了Tailwind CSS仅在App.js中生效，项目其他文件夹内的组件无法正常使用Tailwind样式的问题，希望帮忙排查错误。以下是项目相关配置文件：

项目依赖配置（package.json） #

{
  "name": "client",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "^3.1.1",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "add": "^2.0.6",
    "expo": "^50.0.0",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.2",
    "react-native-feather": "^1.1.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "^0.19.10",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "3.3.2"
  },
  "private": true
}

Babel配置（babel.config.js） #

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

Tailwind配置（tailwind.config.js） #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

排查方向建议 #

• 核对路径匹配规则：确认screens、components文件夹的实际层级和tailwind.config.js中配置的路径完全一致，若存在嵌套子文件夹，可尝试将路径扩展为"./src/**/*.{js,jsx,ts,tsx}"（项目有src目录时）或"./**/*.{js,jsx,ts,tsx}"临时测试是否能覆盖所有文件。
• 清除缓存重启项目：执行expo start --clear清除Metro缓存，缓存残留可能导致样式未同步更新。
• 检查组件导入逻辑：确保其他文件夹的组件在App.js中是正确导入的，避免因路径错误导致组件未被Tailwind扫描工具识别。
• 验证版本兼容性：确认当前使用的NativeWind v2.0.11与Expo 50是否适配，可查看NativeWind官方文档确认版本匹配情况，必要时尝试升级或降级NativeWind版本。
• 检查类名写法：确认其他组件内的Tailwind类名拼写正确，且未使用NativeWind不支持的桌面端专属Tailwind类（部分Tailwind类在React Native环境下无法生效）。

内容的提问来源于stack exchange，提问作者khouloud HADDAD AMAMOU