Expo React Native Nati Base 项目 tailwind（原生）构建失败

Question

我正在尝试使用

npx create-expo-app -e with-router-tailwind

构建 React Native expo 应用程序 在创建项目并运行后，我收到顺风构建失败错误。我尝试了

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

并且它成功编译，没有错误，但是当我 npm start 并在 expo 中打开时，它的构建失败了。

错误

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>

[![在此处输入图像描述][1]][1]

这是我的顺风配置文件

/** @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.js

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


  [1]: https://i.stack.imgur.com/OICiI.png

Answer 1

我也有同样的问题，没找到解决办法。我希望有人可以帮助我们。