nativewind: V4: TailwindCSS classes occasionally break.

This is still breaking in 4.0.23 I’ve tested this on web, ios and android hardware and also on OSX and WSL. The behavior is similar to what @trevorpfiz is describing. The only difference is that expo start does not work, nor does the tunnel. the behavior is the same either way.

• on both OSX and Windows 11 (wsl) the web works just fine. -You can add a ‘new’ class like bg-yellow-500 and you’ll see it.

• on both OSX and Windows 11 (wsl) all hardware devices do not update.

  • If the class was present in the initial load you will see it
  • if the class is added later you will not. This means if you add, say bg-yellow-500 you will see it on the web but not on your device.
  • this is the case for literally any class, regardless of it is layout, font, etc.
  • in both cases inside of node_modules/.cache/nativewind I can see the classes do get added to the stylesheet. In other words if you add bg-yellow-500 in both global.cssnative.css.css as well as global.css.web.css the new class will appear,

    .bg-yellow-500 {
     background-color: #eab308;
   }

• other changes, such as text copy do update with normal fast-refresh behavior.

I have reproduced with with a completely newly scaffolded create-expo-app, and all latest dependencies:

  "expo": "50.0.4",
  "nativewind": "4.0.23",
  "tailwindcss": "^3.4.1"

Edit: I was able to get this working, and I think I was overlooking something. Its true I was not using the --tunnel flag on WSL which was my last testing environment, but it was also the case that WSL was suppressing port 8089, which was the default websockets port to update the bundle.

If you’re reading this and you have the same symptoms as me - it might be because the fast-refresh and the nativewind ports are two different ports, 8081 and 8089 most likely if you’ve not changed them. In a sense I might have had a similar issue as using --tunnel. If you tried a solution like the one here add 8089 to the list above. like $ports = @(8081,8089);

@fendyk I think we could improve the description a bit. This is not just related to -400. Many of the Tailwind classes doesn’t work. E.g just use italic, underline for a text. Use w-10, h-20, etc. Flex properties like align-center, justify-center, etc works. So it’s hard to understand which will work which is not.

It’s actually putting the class names to the elements in DOM. But there are no these classes defined in CSS in DOM.

So the problem should be parsing and generating the output CSS file somehow.

cc @marklawlor wanted to share if these helps

@fendyk can you try 4.0.15

On Windows 4.0.15 solved the .js file issue but displays a new error:

ERROR  Error: jsxImportSource was not set to 'nativewind'. Please refer to http://nativewind.dev/troubleshooting#jsxImportSource


This error is located at:
    in RootLayout
    in Try
    in Unknown
    in Unknown (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App) (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes

I am using https://github.com/fendyk/expo-router-typescript-nativewind-example for testing

can confirm 4.0.14 is broken on MacOS as-well. Doing the exact same on a (Android emulator) And running npx expo start --android I get this error:

tailwindcss(native) rebuilding... done
Android Bundling complete 5666ms
 ERROR  TypeError: Cannot convert undefined value to object

This error is located at:
    in CSSInterop.StatusBar (created by Tutorial)

This is a different issue. Can you please create a new issue with a reproduction

I’ve noticed that several classes don’t seem to work, but when I restart Metro and delete the cache everything seems to work. It seems to be linked to the problem mentioned in #643. Perhaps this problem should be fixed in the repo as it must be the cause of many doubts and will soon be resolved in upcoming Expo updates.

@enesozturk, could you please test my repo to identify any additional non-functional classes? If you find any, commit your findings, and I’ll merge them into the main branch