react native - NativeWind Styling Not Working in NX Monorepo with Expo - Stack Overflow

admin管理员组

文章数量:1125553

I'm setting up a NX monorepo with Expo for mobile apps and using NativeWind for styling. While the project runs fine with standard CSS, I'm encountering issues when integrating NativeWind.
Despite following the official documentation for NativeWind setup with Expo Router (Link: /getting-started/expo-router), the styles do not appear on the screen.

My environment setup includes creating the NX Monorepo, installing expo by configuring it successfully and integrating nativewind using the official documentation.

Below is my tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}", // Assuming components are in the src folder
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
};

Below is a sample component where styles are not showing up:

import React from 'react';
import { Text, View } from 'react-native';
import "../../global.css";

export default function App() {
  return (
    <View>
      <Text className='flex flex-col justify-center items-center bg-black text-white'>
        Hello World
      </Text>
    </View>
  );
}

I tried to debug about this by clearing the cache - expo start -c , ensured tailwind.config.js included all relevant paths and verifying the NativeWind setup with the documentation.

While researching, I found this GitHub issue () suggesting updates to the metro.config.js file. After applying the changes, the project fails to load and shows the following error: "Development server returned response error code: 500" on the emulator.

I've attached the error screenshot:
Image

I’ve created a GitHub repository to demonstrate the issue:

Has anyone successfully integrated NativeWind into an NX monorepo with Expo?
I’d appreciate it if someone could review my setup and let me know if I’ve missed something, especially with configurations like the Metro bundler or Tailwind paths.

I’d also like guidance on resolving the status code 500 error that appears after updating the metro.config.js file based on this suggestion -

本文标签： react nativeNativeWind Styling Not Working in NX Monorepo with ExpoStack Overflow