Expo Nativewind在Android与Web端异常：Android无法解析styles.css

核心原因 #

Nativewind在React Native（Android/iOS）端通过Babel插件将className中的Tailwind类转换为原生样式，不需要直接导入CSS文件。Android端的React Native环境无法解析CSS文件导入，这是打包失败的直接原因；Web端的CSS报错则是因为导入的文件仅包含Tailwind指令，缺少必要配置支持。

解决方案 #

1. 移除Android不兼容的CSS导入 #

直接删除App.tsx中的import './styles.css';语句，React Native端不需要该导入，Nativewind会自动处理Tailwind类转换。

修改后的App.tsx：

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';

export default function App() {
  const variable: string = 'variable';
  return (
    <View className="flex-1 items-center justify-center bg-gray-600">
      <Text className="text-red-200">
        Open up App.js to start working on your app!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

2. 验证Nativewind核心配置 #

检查项目根目录下的babel.config.js，确认已添加Nativewind插件：

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

同时确认tailwind.config.js配置正确，覆盖所有使用Tailwind类的文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"], // 根据项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 修复Web端CSS报错 #

如果Web端需要保留Tailwind CSS支持，按以下步骤调整：

步骤1：更新styles.css

补充Tailwind基础样式指令：

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

步骤2：添加Web端条件导入

在App.tsx中通过平台判断仅在Web端导入CSS：

import { StatusBar } from 'expo-status-bar';
import { Text, View, Platform } from 'react-native';

// 仅Web端执行CSS导入
if (Platform.OS === 'web') {
  import('./styles.css');
}

export default function App() {
  const variable: string = 'variable';
  return (
    <View className="flex-1 items-center justify-center bg-gray-600">
      <Text className="text-red-200">
        Open up App.js to start working on your app!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

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