如果样式是在组件级别完成的，为什么 nativewind 样式不起作用？

Question

如果样式是在 App.Js 中完成的，则使用Nativewind 的React-native 样式效果很好。像这儿：

<NavigationContainer>
      <View>
      <Text className = "text-red-500">Hello</Text>
    </View>
    </NavigationContainer>

但如果样式是在组件级别完成的，那么它就不再起作用了。

return (
    <NavigationContainer>
      <HomeScreen/>
    </NavigationContainer>
  );

主屏幕组件：

import { View, Text } from 'react-native'
import React from 'react'

const HomeScreen = () => {
  return (
    <View>
      <Text className = "text-red-500">Hello</Text>
    </View>
  )
}

export default HomeScreen

Answer 1

您需要通过将其添加到 tailwind.config.ts 来告诉 Nativewind 您的组件所在的位置

content: ["./App.{js,jsx,ts,tsx}", "./<custom directory such as src>/**/*.{js,jsx,ts,tsx}"],

参考： https: //www.nativewind.dev/quick-starts/react-native-cli