My NativeWind Css not working on HomeScreen.js File - react-native

Question

I have tried clearing the expo cache with "expo start -c", still not working.
But it works on my App.js file, when i use the css styling on my HomeScreen File, it does not work.
**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 file**
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 file**
/** #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: [],
}
What i mean is that, I'm using NativewWind in my React-native App. Now after following all of the documentation. i tried using the css in the App.js which is the default home screen, It worked fine. But when i created a new screen (Home) and made it as my default screen after installation REACT NAVIGATION. Using the css on the Home screen isn't reflecting. Its simply not working. And i've done all of the solutions online (Clearing cache, restarting and all but still same result)