I think I got the same problem. Classes are not working randomly. I got a plugin that displays color rectangle next to it, and it is displayed correctly. However, in app preview, the button is not colored.

I tried to install latest nativewind using:

pnpm install nativewind@latest

Tried tailwindcss version 3.4.16, currently using ^3.4.17 which kinda works.

I already tried many combinations, but problem still occurs. Also, sometimes secondary DEFAULT color is not working elsewhere:

colors: {
    primary: "#121212",
    secondary1: "#FFA001",
    secondary2: "#FF7F00",
  }

 or

colors: {
    primary: "#121212",
    secondary: {
      DEFAULT: "#FFA001",
      1: "#FF7F00",
    },
  },

Part of Index.tsx:

<CustomButton containerStyles="w-full mt-7"/>

Button.tsx component:

Doesn't work:

<TouchableOpacity className="bg-secondary">

Once worked, once not:

<TouchableOpacity className="bg-secondary-1">

This way it also doesn't work now:

<TouchableOpacity className="bg-red-400">

Using StyleSheet.create works everytime:

<TouchableOpacity style={styles.button}/>

const styles = StyleSheet.create({
    button: {
        backgroundColor: "orange",
    },
});

package.json

    {
  "name": "newest_react_native_course",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "expo": "~52.0.37",
    "expo-blur": "~14.0.3",
    "expo-constants": "~17.0.7",
    "expo-font": "~13.0.4",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.2",
    "expo-system-ui": "~4.0.8",
    "expo-web-browser": "~14.0.2",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.7",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.2",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.4",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        primary: "#121212",
        secondary: {
          DEFAULT: "#FFA001",
          1: "#FF7F00",
        },
      },
      fontFamily: {
        pthin: ["Poppins-Thin", "sans-serif"],
        pextralight: ["Poppins-ExtraLight", "sans-serif"],
        plight: ["Poppins-Light", "sans-serif"],
        pregular: ["Poppins-Regular", "sans-serif"],
        pmedium: ["Poppins-Medium", "sans-serif"],
        psemibold: ["Poppins-SemiBold", "sans-serif"],
        pbold: ["Poppins-Bold", "sans-serif"],
        pextrabold: ["Poppins-ExtraBold", "sans-serif"],
        pblack: ["Poppins-Black", "sans-serif"],
      },
    },
  },
  plugins: [],
};

babel.config.js:

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

nativewind-env.d.ts:

/// <reference types="nativewind/types" />

metro.config.js:

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

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });