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 --clearnpm run start --clear