Expo SDK 52集成NativeWind报错：找不到nativewind/metro模块

问题根源 #

你当前使用的nativewind@2.0.11是旧版本，而nativewind/metro、nativewind/preset是NativeWind v3.x才引入的模块结构，v2.x根本没有这些文件，所以会出现找不到模块的错误。同时Expo SDK 52（对应React Native 0.76）需要NativeWind v3.x才能兼容。

解决方案 #

方案1：升级NativeWind到v3.x（推荐） #

这是适配Expo SDK 52的最优解：

1. 卸载旧版本NativeWind

npm uninstall nativewind

2. 安装最新版NativeWind

npm install nativewind@latest

3. 统一TailwindCSS版本：你的package.json中dependencies和devDependencies同时存在不同版本的tailwindcss，请删除devDependencies中的tailwindcss，保留dependencies里的tailwindcss@3.4.17（v3要求TailwindCSS 3.3+）
4. 更新配置文件：
   • metro.config.js（替换原有内容）：

   const { getDefaultConfig } = require('expo/metro-config');
   const { withNativeWind } = require('nativewind/metro');
   
   const config = getDefaultConfig(__dirname);
   
   module.exports = withNativeWind(config, { input: './global.css' });
   

   • tailwind.config.js（替换原有内容）：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
     presets: [require("nativewind/preset")],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

5. 创建global.css文件（项目根目录），内容如下：

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

6. 在Expo路由入口文件（如app/_layout.jsx）中导入全局样式：

import './global.css';

7. 清理依赖后重新安装：

rm -rf node_modules package-lock.json
npm install

方案2：保留NativeWind v2.x（不推荐，仅兼容旧项目） #

如果必须使用v2.x，需按照旧版配置修改，不要使用v3的模块路径：

1. babel.config.js添加NativeWind插件：

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

2. tailwind.config.js移除preset：

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 删除metro.config.js中对nativewind/metro的导入，恢复默认Expo metro配置。

额外注意事项 #

• 确保你的Tailwind IntelliSense插件是最新版，避免版本不兼容导致的解析错误
• 运行项目前重启VSCode，确保插件重新加载配置

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