Just starting off working on a React Native project, when installing packages, I couldn't get the effects to work... not sure if it's a problem with my configs or setup.

Here is my code:

Inside app file:

index.tsx 

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


export default function Index() {
  return (
    <View className="items-center">
      <Text className="text-10xl font-bold text-red-500">
        Hello, TailwindCSS with NativeWind! weofijweojweoifjwaiojfaoifjaew
      </Text>
    </View>
  );
}

---
_layout.tsx

import { Text, View } from 'react-native';
import { Slot, Stack } from 'expo-router';
import { StackActions } from '@react-navigation/native';

import React from 'react';

import "./global.css";

const RootLayout = () => {
  return (
  <Stack>
    <Stack.Screen name="index" options = {{ headerShown: false }} />

  </Stack>

  )
}

export default RootLayout

---
global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Outside of app file:

tailwind.config.js

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{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", { jsxImportSource: "nativewind" }],
        "nativewind/babel",
      ],
    };
  };

---
metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: './global.css' });

---
nativewind-env.d.ts

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

I followed a few utube vids and the dos from native wind, can only display the text in index.tsx without any styles.

I've also tried

1. to clear the cache
2. to check if packages are installed