Tailwaind css in nativewind is not beign applied on Screen components - react-native

Question

Tailwind CSS in the native wind is not being applied on Screen components.
Is there any package or dependency that is missing in my project .
This is a package.json
{
"name": "first-app",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"expo": "~46.0.13",
"expo-status-bar": "~1.4.0",
"nativewind": "^2.0.11",
"react": "18.0.0",
"react-native": "0.69.6",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"tailwindcss": "^3.2.0"
},
"private": true
}
Tailwind CSS is Applied on App.js but on screens components
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
export default function App() {
const Stack = createNativeStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
This is Screen Component where native wind ( tailwind ) is not Applied
import { View, Text } from 'react-native'
import React from 'react'
const HomeScreen = () => {
return (
<View className="flex-1 text-center align-middle justify-center">
<Text className="bg-black text-white">App</Text>
</View>
)
}
export default HomeScreen

Answer 1

Firstly my tailwind.config.js Looks like this
module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Then I CHANGED IT WITH FOLLOWING CODE. THE MAIN CHANGE WAS IN content part. By applying the above change tailwindcss started applying both in screens and components. This worked for me
module.exports = {
content:[
"./screens/**/*.{js,jsx,ts,tsx}",
"./pages/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};