bg-orange-500 - color not rendered but -400 etc are (v4)

[iangregsondev]

Describe the bug Trying to use bg-orange-500 does not render orange but -400 does and others. Seems there is an issues with -500

To Reproduce

Add this

      <Text className="bg-orange-500">hello</Text>

Expected behavior Should show an orange background like -400 for example, i.e. this works

      <Text className="bg-orange-400">hello</Text>

Additional context Using the latest version

    "nativewind": "4.0.36",

[Saissaken]

Same happening here, same version. In my case adding and removing a class + restarting the metro server made it work. It's inconsistent, it doesn't happen every time. Also for context, I have a simple fresh install, composed of expo 50.0.13 and expo-router 3.4.8, using the new app directory, and tailwind 3.4.1.

[iangregsondev]

Yes, you are right. I removed the class, restarted it (bun run ios), and then re-added it, and it worked.

I think the -500 was the issue, but I also got it to happen with -600 also.

Once I get the issue, just restarting the server (bun run ios) will not work. I have to remove the class, restart and then add the class back.

[iangregsondev]

I also tried a prebuild --clean, and this did not fix it.

Finally, I was able to get it working by having a View with some value on these and just changing the gap-1 to gap-2 and back again and re-rendered correctly.

    <View className="gap-1">
      <Text className="color-sky-400 bg-red-500">hello</Text>
      <Text className="color-sky-400 bg-red-400">hello</Text>
      <Text className="color-sky-400 bg-red-500">hello</Text>
      <Text className="color-sky-400 bg-red-400">hello</Text>
      <Text className="color-sky-400 bg-red-400">hello</Text>

If it happens again, then I need to change the gap-1 to gap-2 and back again and then all is fine.

So it appears its not related directly to orange-500, from the above snippet, it suddenly stopped rendering anything and restarting the server does not help but updating a style in the view above seems to cause it to render correctly again.

Very strange issue.

[iangregsondev]

Also I tried switching between development build and also Expo Go - same issue.

Tried changing iPhone simulator to another I..e iPhone SE, iPhone 15 / Pro etc.. same issue.

One thing interesting is that I moved to Android and I couldn't get it to happen, it seemed to work all the time.

So it seems (for me at least), its related to iOS only and it seems that it doesn't matter which simulator model I use.

[gorbypark]

This seems to be a known issue that's been going on a for a while and there's been a few attempted fixes. It's not directly related to the specific color it seems. There is something going wrong in the "compiler" step and some classes are just randomly ignored.