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

Question

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

Answer 1

You'll need to tell nativewind the locations of where your components reside by adding this to your tailwind.config.ts

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

reference: https://www.nativewind.dev/quick-starts/react-native-cli

Answer 2

If you setup folder in tailwind.config.js and still not work then delete nodemodule then install it again and it will work.

This works for me:

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