V5 cannot start after installation

[bbhxwl]

{
  "name": "app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios --device",
    "web": "expo start --web",
    "lint": "expo lint"
  },
  "dependencies": {
    "@expo/vector-icons": "^15.0.3",
    "@react-navigation/bottom-tabs": "^7.4.0",
    "@react-navigation/elements": "^2.6.3",
    "@react-navigation/native": "^7.1.8",
    "expo": "~54.0.25",
    "expo-constants": "~18.0.10",
    "expo-font": "~14.0.9",
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.10",
    "expo-linking": "~8.0.9",
    "expo-router": "~6.0.15",
    "expo-splash-screen": "~31.0.11",
    "expo-status-bar": "~3.0.8",
    "expo-symbols": "~1.0.7",
    "expo-system-ui": "~6.0.8",
    "expo-web-browser": "~15.0.9",
    "nativewind": "^5.0.0-preview.2",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-css": "^3.0.1",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-reanimated": "^4.2.0",
    "react-native-safe-area-context": "^5.6.2",
    "react-native-screens": "~4.16.0",
    "react-native-web": "~0.21.0",
    "react-native-worklets-core": "^1.6.2",
    "tailwindcss": "^4.1.17"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.17",
    "@types/react": "~19.1.0",
    "eslint": "^9.25.0",
    "eslint-config-expo": "~10.0.0",
    "postcss": "^8.5.6",
    "typescript": "~5.9.2"
  },
  "private": true
}

babel.config.js

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

metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativewind } = require("nativewind/metro");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativewind(config);

global.css

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";
@import "nativewind/theme";

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    // 1. 确保 content 包含你所有的文件路径
    content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
    // 2. 【核心修复】必须加上这一行！
    presets: [require("nativewind/preset")],
    theme: {
        extend: {},
    },
    plugins: [],
}

[arnaudpfu]

You have to respect the V5 installation instructions, see :
https://www.nativewind.dev/v5/getting-started/installation
or https://www.nativewind.dev/v5/guides/migrate-from-v4

V5 use tailwindcss v4, so you don't need to have a tailwind.config.js file

[bbhxwl]

You have to respect the V5 installation instructions, see : https://www.nativewind.dev/v5/getting-started/installation or https://www.nativewind.dev/v5/guides/migrate-from-v4

V5 use tailwindcss v4, so you don't need to have a tailwind.config.js file

npx rn-new@next bbhxwlCamera --nativewind --expo-router --yarn --no-git --i18next

I successfully installed it using this. But it seems that nativeWind no longer supports Heroui native UI components.

[danstepanov]

closing this as not having sufficient information for an issue. If you're still facing the issue, please re-open a new issue with a minimal reproduction starting from npx rn-new@next --nativewind --expo-router

[RobertOstermann]

@bbhxwl Have you pinned lightning css?

"overrides": {
  "lightningcss": "1.30.1"
}