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

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));

Shared source files

Tailwind must see classes from shared packages. Add paths relative to the CSS file, for example:

@source "../../packages/ui/src";

Keep existing Nx/Metro resolver settings and inspect sibling consumers before removing v4 dependencies from a workspace. Verify shared component styles in native and web output.

Additional Resources

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