Naativewind not working with TailwindCSS v3.3.2 and react-native expo

Question

I have recently started learning react-native and as the docs suggest I am using expo framework to do so.

I have been trying to use nativewind for configuring tailwind in my project but since latest version of nativewind and Tailwind are not supported I am facing issues where my tailwind styles are not getting applied.

Here are my configuration files...

package.json

{
  "name": "react-native-jsmastery",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~52.0.37",
    "expo-constants": "~17.0.7",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.17",
    "expo-status-bar": "~2.0.1",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-native": "0.76.7",
    "react-native-reanimated": "^3.16.2",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "~4.4.0",
    "tailwindcss": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

metro.config.js

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

const config = getDefaultConfig(__dirname, { isCSSEnabled: true })

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

babel.config.js

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: "#161622",
        secondary: {
          DEFAULT: "#FF9C01",
          100: "#FF9001",
          200: "#FF8E01",
        },
        black: {
          DEFAULT: "#000",
          100: "#1E1E2D",
          200: "#232533",
        },
        gray: {
          100: "#CDCDE0",
        },
      },
      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: [],
  presets: [require("nativewind/preset")],
};

Thank you.

I tried googling and people suggested locking my tailwind version to 3.3.2 but I am still facing the same issue even after trying that solution.

as I do not have any experience with react-native project setup I am not being able to debug the problem.

I would be grateful if anyone can suggest me something,

Answer 1

Update

I actually solved my issue. In tailwind.config.js edited:

content: ["./app/**/*.{js,jsx,ts,tsx}"],

with

content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

Now everything works in my case. I'm using newest pnpm, expo ~52.0.37, tailwindcss ^3.4.17 and nativewind ^4.1.23.

Original

To author: try updating TailwindCSS from ^3.3.2 to ^3.4.17 version. In my case:

pnpm install tailwindcss@^3.4.17

Also when running, clear cache (in my case):

npx expo start --clear

Problem and Debug

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 also noticed that classes like text-xl, text-2xl are not working, but text-3xl is working. Weird.

I tried to install latest Native Wind using:

pnpm install nativewind@latest

Tried TailwindCSS v3.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

{
  "dependencies": {
    "expo": "~52.0.37",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "tailwindcss": "^3.4.17",
    // ...
  },
}

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",
        },
      },
    },
  },
  plugins: [],
};