React native – Unable to setup nativewind to function with expo SDK 52

I’m trying to set up NativeWind in a new project using Expo SDK 52, but the styles are not applying to my components. I’ve followed the setup instructions in the NativeWind documentation, but it still doesn’t work.

Here are the steps I took:

1. Installed NativeWind and dependencies:

   npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
   

2. Initialized Tailwind CSS:

   npx tailwindcss init
   

3. Added the following to my tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ["app/index.js", "./App.{js,jsx,ts,tsx}", "./components/**/*. {js,jsx,ts,tsx}"],
     presets: [require("nativewind/preset")],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   
   

4. Added the following to my babel.config.js:

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

Here is my package.json

{
"name": "capp",
"version": "1.0.0",
"main": "expo-router/entry",
"scripts": {
 "start": "expo start",
 "android": "expo start --android",
 "ios": "expo start --ios",
 "web": "expo start --web"
},
"dependencies": {
 "expo": "~52.0.11",
 "expo-constants": "~17.0.3",
 "expo-linking": "~7.0.3",
 "expo-router": "~4.0.11",
 "expo-status-bar": "~2.0.0",
 "nativewind": "^4.1.23",
 "react": "18.3.1",
 "react-native": "0.76.3",
 "react-native-reanimated": "^3.16.3",
 "react-native-safe-area-context": "^4.12.0",
 "react-native-screens": "~4.1.0",
 "tailwindcss": "^3.4.16"
},
"devDependencies": {
 "@babel/core": "^7.20.0"
},
"private": true
}

Here is my index.jsx

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


export default function App() {
    return (
        <View className="flex-1 items-center justify-center bg-black">
            <Text>CAPP!</Text>
            <StatusBar style="auto" />
            <Link href="/profile " style={{ color: 'blue'}}>Go to Profile!</Link>
        </View>
    );
}

When I use Tailwind classes (e.g., className="bg-blue-500 p-4"), they don’t seem to apply. I’ve also tried clearing the cache and restarting the development server.

What could be causing this issue? Are there additional setup steps required for NativeWind to work with Expo SDK 52?

I’ve followed the NativeWind setup instructions, including installing dependencies, configuring tailwind.config.js, and verifying the content paths. I’m using the className prop for styling but can’t get it to work. I’ve also tried clearing the cache and restarting the dev server, but no luck.