NX+Expo React Native项目中NativeWind配置无效求助

1. 修复Tailwind配置文件的路径错误 #

你的tailwind.config.js中content字段的路径拼接方式有误：join(__dirname, [数组])会将数组转为字符串，导致Tailwind无法正确扫描到项目文件，进而无法生成对应样式。

修改后的配置：

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // 每个路径单独用join拼接
    join(__dirname, './index.{js,jsx,ts,tsx}'),
    join(__dirname, './src/App.{js,jsx,ts,tsx}'),
    join(__dirname, './src/components/*.{js,jsx,ts,tsx}'),
    join(__dirname, './src/modules/*.{js,jsx,ts,tsx}'),
    join(__dirname, './src/**/*.{js,jsx,ts,tsx}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {
      colors: {
        inactive: '#C4C4C4',
        tint: 'rgb(216, 216, 216)',
        'rapio-green': '#00C17C',
        'rapio-pink': '#dd016b',
        warning: '#FFC046',
        alert: '#FF7575',
        success: '#06D98D',
        info: '#2196f3',
        space: '#F9F9F9',
      },
    },
  },
  plugins: [],
};

2. 检查Babel配置是否正确添加NativeWind插件 #

确保项目的babel.config.js中包含NativeWind的babel插件，这是NativeWind生效的核心配置之一：

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

如果是NX项目，需确保该配置在项目级别的babel文件中生效。

3. 修正测试组件的类名错误 #

你的测试组件中使用了错误的类名p-y-4，NativeWind遵循Tailwind的规范，正确的垂直内边距类名应为py-4：

<View className="bg-black h-screen py-4">
  <ActivityIndicator size="large" />
</View>

4. 确认NativeWindStyleSheet的正确初始化 #

在App.tsx顶部确保正确导入并设置输出模式，且代码在组件渲染前执行：

import { NativeWindStyleSheet } from "nativewind";

// 必须设置为'native'模式
NativeWindStyleSheet.setOutput('native');

export default function App() {
  // ... 组件代码
}

5. 彻底清理缓存并重启项目 #

执行以下命令清理缓存后重启项目：

# Expo命令
npx expo start --clear

# 或NX项目命令
nx reset
nx run [你的应用名称]:start --clear

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