Expo and Nativewind v4 issues.Styles are not being applied

I tried everything .Specifically followed documentation: tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

babel.config.js

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

_layout.jsx:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { Slot } from 'expo-router'

export default function _layout() {
  return (
   <>
   <Slot/>
   </>
  )
}

index.jsx:

import {  Text, View } from 'react-native';
import { Link } from 'expo-router';

export default function HomeScreen() {
  return (
   
    <View className='flex-1 justify-center items-center'>
    <Text className='text-white text-lg'>Hello, Tailwind CSS!</Text>
    <Link href="/profile">Profile</Link>
  </View>


  );
}

Still styles are not being applied.P.S I also added metro.config.js.Tried to use v2 but it says that i need to update SDK

I've faced the same issue. This worked for me.

I've changed the react-native-safe-area-context version:

npm install react-native-safe-area-context@4.12.0

Don't forget to clear the cache when you start expo again with:

npx expo start --clear