React Native集成Nativewind后样式不生效，请求技术支持

一、修正Tailwind配置文件的内容扫描路径 #

你的tailwind.config.js里的content字段包含了官方示例占位符<custom-folder>，这会导致Tailwind无法正确扫描组件文件、生成对应样式。修改为：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 覆盖所有JS/TS文件，确保扫描到你的组件
  content: ["./App.{js,jsx,ts,tsx}", "./**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    colors: {
      transparent: 'rgba(0, 0, 0, 0)',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'deep-slate': '#23272d',
      'deep-midnight': '#232431',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
      'blanco': '#1d1e20'
    },
  },
  plugins: [],
}

二、确认Babel配置是否正确 #

Nativewind v2需要在babel.config.js中配置专属插件，若未配置，修改如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['nativewind/babel'],
};

三、安装缺失的Tailwind CSS依赖 #

Nativewind v2依赖Tailwind CSS v3.x，你的package.json未列出该依赖，执行安装：

npm install tailwindcss@3.3.2
# 或使用yarn
yarn add tailwindcss@3.3.2

四、修正错误的样式类名 #

你的Text组件使用了text-bold，但Tailwind的正确字体加粗类名是font-bold，修改App.tsx：

import React from 'react'
import { SafeAreaView, StatusBar, Text, View } from 'react-native'

function App(): React.JSX.Element {
  return (
    <View className='bg-slate-900'>
      <View className='flex-1 bg-black'>
        <StatusBar barStyle="light-content" translucent={false} backgroundColor={'black'} />
        <SafeAreaView className='flex-1 bg-red'>
          <Text className='font-bold'>Hello</Text>
        </SafeAreaView>
      </View>
    </View>
  );
}

export default App

五、清除缓存并重启服务 #

执行以下命令清除Metro缓存，再重新运行项目：

npx react-native start --reset-cache
# 重新运行iOS/Android
npx react-native run-ios
# 或
npx react-native run-android

内容的提问来源于stack exchange，提问作者ojandali