React Native 集成 NativeWind/TailwindCSS 时无法解析./global.css 模块问题求助

我之前也踩过NativeWind 4.x的模块解析坑，结合你贴出来的配置和报错信息，咱们一步步来排查解决：

问题核心分析 #

你现在的报错是因为Metro默认不识别.css文件，而且NativeWind 4.x其实不需要手动在App.tsx里导入global.css——你已经在metro.config.js里通过withNativeWind指定了这个文件作为输入，NativeWind会自动处理它，手动导入反而会触发Metro的模块解析错误。

第一步：先解决最直接的问题 #

打开你的App.tsx，把import "./global.css"这一行删掉！这是最可能解决当前报错的关键操作。

第二步：确认配置和文件的正确性 #

1. 检查global.css的位置与内容

你在metro.config.js里配置的input: "./global.css"，意味着这个文件必须放在项目根目录（和App.tsx、metro.config.js同级），而且文件内容至少要包含这三行基础指令：

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

如果文件位置不对、拼写错误（比如大小写，Mac/Linux系统区分大小写）或者内容为空，都会导致后续样式不生效。

2. 优化Metro配置

你的metro.config.js基本正确，可以微调一下确保Metro能识别css文件：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withNativeWind } = require("nativewind/metro");

const defaultConfig = getDefaultConfig(__dirname);
const customConfig = mergeConfig(defaultConfig, {
  // 这里可以添加你自己的自定义配置，比如assetExts等
});

module.exports = withNativeWind(customConfig, { 
  input: "./global.css",
  // 明确告诉Metro要处理css文件
  exts: ["css"]
});

3. 其他配置确认

• 你的babel.config.js里已经添加了nativewind/babel预设，这个是正确的，不需要修改
• tailwind.config.js的content路径已经覆盖了App、components、screens下的所有文件，确保所有使用Tailwind类名的组件都能被扫描到，这个配置没问题

第三步：清除缓存重启项目 #

做完上面的修改后，一定要清除Metro的缓存，不然旧的配置可能还在生效：

npx react-native start --reset-cache

然后重新启动你的React Native项目，应该就能正常打包了。

额外注意点 #

你的依赖版本都是兼容的：NativeWind 4.1.23支持React 19和RN 0.79.x，TailwindCSS 3.4.x也和NativeWind 4.x匹配，不用担心版本冲突的问题。

内容来源于stack exchange