NativeWind样式在React Native的HomeScreen.js中不生效求助

问题现象 #

React Native项目中NativeWind样式在App.js可正常生效，但将HomeScreen设为React Navigation默认页面后，该页面的NativeWind样式完全失效。已执行expo start -c清除Expo缓存，问题仍存在。

相关代码 #

App.js #

import * as React from 'react';  
import { StatusBar } from 'expo-status-bar';  
import { Text, View } from 'react-native';  
import { NavigationContainer } from '@react-navigation/native';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';  
import HomeScreen from './screens/HomeScreen';  

const Stack = createNativeStackNavigator();

export default function App() {  
  return (  
    <NavigationContainer>   
      <Stack.Navigator>  
        <Stack.Screen name="Home" component={HomeScreen} />    
      </Stack.Navigator>  
    </NavigationContainer>  
  );  
}

HomeScreen.js #

import { View, Text, SafeAreaView } from 'react-native';  
import React, { useLayoutEffect } from 'react';  
import { useNavigation } from '@react-navigation/native';  

const HomeScreen = () => {  
  const navigation = useNavigation();  

  useLayoutEffect(() => {  
    navigation.setOptions({  
      headerShown: false,  
    });  
  }, []);  
  return (  
    <SafeAreaView>  
      <Text className="text-red-500">   HomeScreen   </Text>  
    </SafeAreaView>  
  );  
};  

export default HomeScreen;

tailwind.config.js #

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [  
    "./App.{js,jsx,ts,tsx}",  
    "./screens/**/ *.{js,jsx,ts,tsx}",  
    "./pages/**/ *.{js,ts,jsx,tsx}",  
    "./components/**/ *.{js,ts,jsx,tsx}",  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}  

问题原因及解决方法 #

问题出在tailwind.config.js的content配置项中，路径规则里多了不必要的空格：

• 原路径写法："./screens/**/ *.{js,jsx,ts,tsx}"（/**/和*.之间存在空格）
• 修正后写法："./screens/**/*.{js,jsx,ts,tsx}"（移除空格）

Tailwind的路径匹配对空格敏感，多余的空格会导致无法识别screens目录下的文件，因此HomeScreen的样式不会被编译。

修复步骤 #

1. 修改tailwind.config.js中所有content路径里的空格，确保格式正确：

content: [
  "./App.{js,jsx,ts,tsx}",
  "./screens/**/*.{js,jsx,ts,tsx}",
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
],

2. 执行expo start -c清除缓存并重启项目，样式即可正常生效。

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