NX Monorepo+Expo集成NativeWind样式失效及500错误求助

核心配置排查 #

1. Tailwind配置修正 #

确保tailwind.config.js（位于apps/expo-app目录下）的content路径匹配Monorepo结构，同时确认global.css的导入路径正确：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    // 若存在跨包组件，需添加对应路径，比如 "../../packages/ui/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

2. PostCSS配置必须存在 #

在apps/expo-app目录下创建postcss.config.js，配置如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    nativewind/postcss: {},
  },
};

Metro配置修复（解决500错误） #

错误的Metro配置是导致500错误的核心原因，替换apps/expo-app/metro.config.js为以下内容：

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const path = require('path');

const config = getDefaultConfig(__dirname);

// 让Metro监控Monorepo根目录的文件变化
config.watchFolders = [path.resolve(__dirname, '../../')];

// 允许Metro处理CSS文件和TS/TSX源文件
config.resolver.assetExts.push('css');
config.resolver.sourceExts.push('ts', 'tsx');

// 关联NativeWind与全局CSS文件
module.exports = withNativeWind(config, { input: './global.css' });

注意：input路径必须是相对于当前metro.config.js的global.css位置，若你的global.css在apps/expo-app根目录，上述路径正确。

组件代码修正 #

你的示例组件存在两个问题：

• Text组件不支持flex布局属性，需将布局类移到外层View
• global.css导入路径错误，修正为相对当前组件的正确路径

修正后的组件代码：

import React from 'react';
import { Text, View } from 'react-native';
import "./global.css"; // 若组件在app目录下，直接用当前目录相对路径

export default function App() {
  return (
    <View className='flex-1 flex flex-col justify-center items-center bg-black'>
      <Text className='text-white'>
        Hello World
      </Text>
    </View>
  );
}

最终调试步骤 #

1. 清理NX和Expo缓存：

   npx nx reset && expo start -c
   

2. 验证global.css内容：确保包含Tailwind指令

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

3. 测试样式生成：执行以下命令，若生成output.css且包含对应样式，说明Tailwind配置正常

   cd apps/expo-app
   npx tailwindcss -i ./global.css -o ./output.css
   

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