Native Wind not working with expo project in ReactNaive

Question

Could someone please assist me in resolving this issue? Despite trying various solutions, I'm puzzled as to why Tailwind isn't functioning properly in my ReactNative expo project.

here is my App.js

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import HomeScreens from './screens/HomeScreens';


export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <StatusBar style="dark" />
      <Text className="text-red-600">Apps</Text>
    </View>
  );
}

babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
"nativewind/babel",
    ],
  };
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App/**/*.{js,jsx,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "name": "awesomeproject",
  "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": {
    "@expo/webpack-config": "^18.1.2",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "expo": "49.0.0",
    "expo-status-bar": "~1.6.0",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "3.3.2"
  },
  "private": true
}

Please Guide me

I tried everything which I could so far