Expo React Native中NativeWind的className样式不生效问题

刚启动React Native项目开发，安装相关依赖包后，NativeWind的className样式效果无法生效，不确定是配置还是设置环节出现问题。以下是项目相关代码：

应用内文件 #

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;

应用外配置文件 #

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" />

已尝试以下操作：

• 清除缓存
• 检查依赖包是否安装完成

内容的提问来源于stack exchange，提问作者Leonardo Letian Xin