NativeWind styles not hot-reloading in Expo 54 project (changes only appear after expo start -c)

I’m working on a React Native Expo (SDK 54) project with NativeWind (TailwindCSS for React Native).

The issue is:

• Every time I add or change a Tailwind class, I have to restart my project with npx expo start -c.

• Styles don't hot-reload in Expo Go.

Project Structure

smart-closet/  app/    (tabs)/      _layout.tsx      index.tsx      explore.tsx    global.css    modal.tsx  components/  constants/  hooks/  scripts/  tailwind.config.js  metro.config.js  babel.config.js  expo-env.d.ts

tailwind.config.js

/** @type {import('tailwindcss').Config} */module.exports = {  content: ["./app/**/*.{js,jsx,ts,tsx}","./components/**/*.{js,jsx,ts,tsx}","./global.css", // added global.css  ],  presets: [require("nativewind/preset")],  theme: {    extend: {},  },  plugins: [],};

metro.config.js

    const { getDefaultConfig } = require("expo/metro-config");    const { withNativeWind } = require("nativewind/metro");    const config = getDefaultConfig(__dirname);    module.exports = withNativeWind(config, { input: "./app/global.css" });

babel.config.js

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

global.css

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

_layout.tsx

import "./global.css";import {  DarkTheme,  DefaultTheme,  ThemeProvider,} from "@react-navigation/native";import { Stack } from "expo-router";import { StatusBar } from "expo-status-bar";import "react-native-reanimated";import { useColorScheme } from "@/hooks/use-color-scheme";export const unstable_settings = {  anchor: "(tabs)",};export default function RootLayout() {  const colorScheme = useColorScheme();  return (<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}><Stack><Stack.Screen name="(tabs)" options={{ headerShown: false }} /><Stack.Screen          name="modal"          options={{ presentation: "modal", title: "Modal" }}        /></Stack><StatusBar style="auto" /></ThemeProvider>  );}

Problem

When I add or update Tailwind classes like bg-red-500 in a component, the change does not appear until I restart with npx expo start -c.

Expected behavior: Hot reload / Fast refresh should apply the new NativeWind styles instantly.

Using Expo Go on Android for testing.

Question

How can I make NativeWind styles hot-reload properly in an Expo 54 + NativeWind project without restarting every time?Do I need a custom dev client or is there a config issue in my setup?

here my GIT Repo : https://github.com/gmnchamikara/Expo-54-NativeWind-project