Nativewind styless not being applied to React Native project

I'm working on this app and no styles are being applied. I think I made the right configuration, can someone help me find what is wrong?

package.json

{
  "name": "nlw-expert",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "expo": "~50.0.5",
    "expo-font": "~11.10.2",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.6",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.1",
    "react-test-renderer": "18.2.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.1.3"
  },
  "private": true
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/app/**/*.{ts, tsx}",
    "./src/components/**/*.{ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

_layout.tsx

import { Slot } from "expo-router";
import { SafeAreaView } from "react-native";

export default function Layout() {
  return (
    <SafeAreaView className="flex-1 bg-slate-900">
      <Slot />
    </SafeAreaView>
  );
}

index.tsx

import { View, Text } from "react-native";

export default function Home() {
  return (
    <View className="flex-1 pt-8">
      <Text className="text-white text-2xl">Hello World</Text>
    </View>
  );
}

I referenced to this post but nothing I search about makes it work. I also tried referencing this one github post but the SafeAreaView being removed or not doesn't apply the styles.

add

import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  web: "css",
  default: "native",
});

inside your root app/_layout.tsx file.

and add 'nativewind/babel' plugin to babel.conig.js file also

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

like this . this is working fine for me