React native Question posted in
The official React Native documentation can be found here.

Expo React Native Nati Base project tailwind(native) build failed

I am trying to build react native expo app using npx create-expo-app -e with-router-tailwind After creating the project and running I get a tailwind build failed error. I tried node D:ProjectsChat 101 (APP)chat-101-masternode_modulestailwindcsslibcli.js --input "D:ProjectsChat 101 (APP)chat-101-mastersrcglobal.css" --output "D:ProjectsChat 101 (APP)chat-101-masternode_modules.cachenativewindglobal.css.native.css" --watch and its successfully compiled without errors but when I npm start and open in expo go its build failed.

Error

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:ProjectsChat 101 (APP)chat-101-masternode_modulestailwindcsslibcli.js --input "D:ProjectsChat 101 (APP)chat-101-mastersrcglobal.css" --output "D:ProjectsChat 101 (APP)chat-101-masternode_modules.cachenativewindglobal.css.native.css" --watch
PS D:ProjectsChat 101 (APP)chat-101-master>
[![enter image description here][1]][1]

here’s my tailwind config file

/** @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
Tags:

2

Answers


  1. 0

    The problem is because of the spaces in folder name "Chat 101 (APP)"
    rename it and remove spaces, for example "Chat_101_APP"

    Login or Signup to reply.
  2. 0

    Found 2 ways to fix the issue, its related to nativewind – one of the packages in the project.

    FIRST

    reference to folder structure of with-router-tailwind project you mentioned above, head to your _layout.tsx and replace import "../global.css"; with import '../../node_modules/.cache/nativewind/global.css'
    this should enable the build to go through / prevent freezing of the build

    ALTERNATIVE SOLUTION (I recommend this)

    open your node_modules folder and locate nativewind – follow this directory node_modulesnativewinddistmetrotransformer.js

    here, replace return metro_transform_worker_1.default.transform(config, projectRoot, filename, Buffer.from(require(‘${config.nativewind.output}’);, "utf8"), options);

    with

    return metro_transform_worker_1.default.transform(config, projectRoot, filename, Buffer.from(require(‘${config.nativewind.output.replace(//g, ‘\’)}’);, "utf8"), options);

    i added .replace(//g, '\') to the output to curb the isssue

    Hope this helps, happy coding

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search