TailwindCSS not working in React Native project

I created a React Native app using Expo and tried to use Tailwind CSS with the help of NativeWind. I followed this docs:

Read the docs here…

Versions:

• react-native : 0.74.3
• nativewind: 2.0.11
• typescript: 5.3.3
• tailwindcss: 3.3.2

tailwind.config.js:

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

babel.config.js:

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

After this, I got a red line in my code while using className indicating an error which was solved by creating a file named my-app.d.ts.

/// <reference types="nativewind/types" />

index.tsx:

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-white">
            <Text className="text-3xl">Hello! I am starting from Home</Text>
            <StatusBar style='auto' />
            <Link href="/profile" style={{color : 'blue'}}>Go To Profile</Link>
        </View>
    )
}

The Tailwind classes in <View> are not working.

I tried:

1. Restarting the server again.
2. Start using –clear
   npm run start --clear