Expo React Native项目配置Nativewind时Babel插件报错求助

可能的原因及对应解决方案 #

1. Nativewind版本适配问题（v4+） #

若使用Nativewind v4及以上版本，其Babel配置逻辑已调整，无需在plugins数组中单独声明nativewind/babel，需将其加入presets并配置jsxImportSource：

修改babel.config.js为：

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

2. 依赖版本不匹配 #

确保Nativewind与Tailwind CSS、Expo SDK版本兼容：

• Nativewind v4 要求 Tailwind CSS v3.3+
• 推荐使用Expo SDK 49及以上版本

执行命令更新依赖：

npm install nativewind@latest tailwindcss@latest

3. 清除缓存并重启项目 #

修改配置后，清除Expo缓存避免旧配置残留：

npx expo start --clear

4. 校验tailwind.config.js路径 #

确认content字段覆盖项目所有需要样式的文件，若有额外目录可补充路径：

module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}" // 如有src目录需添加
  ],
  theme: {
    extend: {},
  },
};

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