[v4] Expo V3 Router and Nativewind. Styles are not loading.

[Viraj-10]

Describe the bug A clear and concise description of what the bug is. Initial load of application in Expo router is not loading styles. but once you hot reload it after just saving tailwind.config.js without any changes. it loads all the styling.

To Reproduce Steps to reproduce the behavior:

1. clone this github repo link.
2. run it on ios. (you will see styles are not loaded)
3. save tailwind.config.js and refresh the app it will load all the styles.

Expected behavior It should have load style on initial load of the application.

Video

https://github.com/marklawlor/nativewind/assets/66306233/73e6f5b2-3838-4309-a7b2-7abd86c82d36

[ArifKobel]

I am having the same Problem.

[BAMFuuuCrab]

hi guys,i found the same problem in my project, it happend that i transform to src directory. I tried to roll back the directory structure to before using/src, and the problem was resolved, and it only occurs in iOS. like this:

@Viraj-10 @ArifKobel

[welsh11]

Same issue here, I don't really want to change my project layout so it would be good to know if there is a solution

[thienautran]

I fixed this by running: npx expo start -c Or expo start -c

I put this command in my package json as the default start script

The -c / --clear flag clears the expo cache when starting the dev server , not sure if there's a better workaround but this worked for me

[erkamdemirci]

I fixed this by running: npx expo start -c Or expo start -c

I put this command in my package json as the default start script

The -c / --clear flag clears the expo cache when starting the dev server , not sure if there's a better workaround but this worked for me

tried this first but didnt work for me...

[rlesniak]

Same here. I need to make change in any component, save, and then press r in terminal to reload expo's JS . In addition, the build version (production) lacks the same styles as the developer version.

[erkamdemirci]

Tried @BAMFuuuCrab 's solution and it worked for me! (using expo-router btw)

Also some recommendations;

• Use v4.0.1 (they also recommend this) https://www.nativewind.dev/v4/getting-started/expo-router "nativewind": "4.0.1", "tailwindcss": "^3.4.3"
• Be careful with metro.config.js path for global.css; module.exports = withNativeWind(config, { input: './global.css' });
• Double check tailwind.config.js content and presets; content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'] presets: [require('nativewind/preset')],
• Also here is my babel.config.js presets and plugins; presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'] plugins: ['react-native-reanimated/plugin']

[BAMFuuuCrab]

Afterwards, I tried some other methods and found another solution that works with the src directory (it worked for me).

Make sure your tailwind.config.js settings are correct, ensuring the content configuration is accurate. You can try using my configuration.

const { hairlineWidth } = require('nativewind/theme');

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

Ensure global.css is correctly imported at the root.

In metro.config.js, also make sure the path to global.css is correctly configured.

After confirming there are no mistakes in the above, slightly change the way you start the project.

Since this issue only occurs for me on the iOS platform, first use

npx expo run:ios

If you don't have an iOS folder, Expo will first perform a prebuild, then build and install onto the iOS device. After this step, you can stop the development server with Control + C.

Start the development server with

npx expo start --clear

The Expo documentation explains the --clear parameter as follows: Restart the development server and clear the JavaScript transformation caches.

so, that it, i hope the above can be helpful to you guys if this method works, I suggest configuring it in package.json.

{
  "scripts": {
    "start": "expo start --clear",
  },
}

@welsh11

[danharten-sovtech]

I needed to clear my expo cache once. All subsequent tries worked fine.

I presume some config is cached on expo init, and it's not aware of nativewind after installing, until reset 🤷

Not entirely sure though. Would be cool to hear from maintainers on this one

[liydaco]

Still an issue for me

[n8udd]

• content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'] presets: [require('nativewind/preset')],

This was the issue for me. I wasn't including the components dir which now sits outside of /app