Expo React Native项目Tailwind(native)构建失败求助

问题情况 #

使用命令npx create-expo-app -e with-router-tailwind创建Expo React Native项目，运行时出现Tailwind构建失败错误。手动执行指定的Tailwind CLI命令能编译成功，但执行npm start并在Expo Go中打开时仍构建失败。

错误日志 #

Logs for your project will appear below. Press Ctrl+C to exit.
Using src/app as the root directory for Expo Router.
tailwindcss(native) rebuilding... tailwindcss(native) is taking a long time to build, please read https://tailwindcss.com/docs/content-configuration#pattern-recommendations to speed up your build time


Error running TailwindCSS CLI, please run the CLI manually to see the error.
Command used:  node D:\Projects\Chat 101 (APP)\chat-101-master\node_modules\tailwindcss\lib\cli.js --input \"D:\Projects\Chat 101 (APP)\chat-101-master\src\global.css\" --output \"D:\Projects\Chat 101 (APP)\chat-101-master\node_modules\.cache\nativewind\global.css.native.css\" --watch
PS D:\Projects\Chat 101 (APP)\chat-101-master>

项目配置文件 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  future: {
    hoverOnlyWhenSupported: true,
  },
  plugins: [],
};

package.json #

{
  "name": "chat-101",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-voice/voice": "^3.2.4",
    "axios": "^1.6.7",
    "expo": "^50.0.1",
    "expo-av": "~13.10.4",
    "expo-constants": "~15.4.2",
    "expo-file-system": "~16.0.6",
    "expo-linking": "~6.2.1",
    "expo-router": "~3.4.1",
    "expo-splash-screen": "~0.26.1",
    "expo-status-bar": "~1.11.1",
    "microsoft-cognitiveservices-speech-sdk": "^1.35.0",
    "nativewind": "^4.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "^0.73.4",
    "react-native-get-random-values": "^1.10.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "@types/react-native": "^0.73.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.0"
  },
  "private": true
}

babel.config.js #

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

tsconfig.json #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "extends": "expo/tsconfig.base",
  "include": ["global.d.ts", "**/*.ts", "**/*.tsx"]
}

解决方法 #

• 修复路径特殊字符问题：项目路径包含空格和括号，导致Expo调用CLI时转义异常。将项目移动到不含空格、特殊字符的路径下，比如D:\Projects\Chat101APP\chat-101-master。

• 调整Babel配置顺序：NativeWind 4.x要求nativewind/babel预设放在babel-preset-expo之前，修改babel.config.js如下：

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

• 清理缓存并重启：删除node_modules/.cache/nativewind目录，执行npm start --clear彻底清理缓存后重启项目。

• 验证global.css文件：确保src/global.css存在且包含Tailwind基础指令：

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

• 检查版本兼容性：确认NativeWind 4.x与Tailwind 3.4.x、Expo 50.x的兼容性，若仍有问题，可尝试降级NativeWind到3.x版本测试。

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