Skip to main content
Version: v4

Using with Monorepos

NativeWind can be used in an Nx Monorepo that is already configured to use Expo and the corresponding plugin @nx/expo

NX Monorepo Setup​

When working with NativeWind in an NX monorepo, there are some specific configurations needed to ensure proper integration. The main challenge is correctly configuring the Metro bundler to work with both NX and NativeWind.

Prerequisites​

Simply configure your Expo project in Nx as per the Expo setup guide

info

Skip the metro.config.js setup as we will address this part here.

Modify your metro.config.js​

Add the NativeWind plugin to your metro.config.js using a promise chain as shown below:

metro.config.js
const { withNativeWind } = require("nativewind/metro");

// ... existing Nx configuration

module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
  // ... existing Nx config
}).then((config) => withNativeWind(config, { input: "./global.css" }));

Additional Resources​

For more complex monorepo setups or specific issues, refer to: