Why nativewind styles doesn't work if the styling is done at component level?

React-native styling using Nativewind works fine if the styling is done at App.Js. Like here:

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

But if the styling is done at component level, then it doesn't work anymore.

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

HomeScreen Component:

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