Natiwind styles using pnpm do not work. Tailwind does

[francois-pasquier]

Describe the bug
Hey,

Following this issue: nativewind/nativewind#1428

This one is new because I believe it's different as I moved on with pnpm

I am having issues having nativewind styles being applied in a monorepo.

Basically, working on mobile or on next, if I set a color in a packages/app component, it won’t work.

It DOES work if I use this color directly inside of next or native

Tailwind works properly though!

My understanding is that nativewind does not watch properly the directories outside so tailwind can’t extract the required classes

Here is the repro:

You can either pnpm web or pnpm native to see the issue

Reproduction
https://github.com/francois-pasquier/nativewind-monorepo

Expected behavior
Styles should be applied

[DoctorDerek]

Yeah AFAIK pnpm has never worked with RN let alone Nativewind.

I think the Solito starter is now outdated for use with Nativewind (or requires version locking to previous version, I'm not sure).

But it's a useful reference because 1) it uses Yarn for the monorepo (with nodeLinker: node-modules being mandatory) and 2) it's a working example of RN with Nativewind.

Any updates?

@hknakn It's just a suggestion, but a more helpful post would be about your own experiences, such as:

"I couldn't get Nativewind working with pnpm either. My version numbers are Tailwind _, Expo _, RN _, Nativewind _, and PNPM _. Has anyone else seen this issue or have any recommendations?"

Maybe my most recent article would be helpful in clarifying the various RN Expo Nativewind issues that are inevitable in this development environment. Cheers! https://medium.com/react-in-the-real-world/react-native-isnt-perfect-but-i-still-recommend-it-here-s-why-9f9b2ce0911b?sk=07dcd1305bf7dd4b9695178e7ead5c87

[DoctorDerek]

Solito / Nativewind starter code: https://github.com/nandorojo/solito/tree/master/example-monorepos/with-tailwind
Solito / Nativewind starter docs: https://solito.dev/tailwind
Most recent update about Nativewind in Solito repo: nandorojo/solito#448
That post links to: https://github.com/SantiMNV/solito-nativewind-v4-app-router

[DoctorDerek]

Also unclosed PR nandorojo/solito#506 may indicate how to use Nativewind 4.

Again I must stress that unless you read in recent Expo docs that PNPM actually works with Expo + RN, then I would abandon it in favor of either a Yarn monorepo or separate apps.

[francois-pasquier]

I read all of this.

Expo does work with pnpm

I come from a yarn monorepo. I had issues with it, pnpm worked fine.

The only thing I miss now is a working nativewind install.

Can the maintainers chime in?

[a-eid]

it's not working for me either.

[a-eid]

@DoctorDerek pnpm works fine with expo... it has been working for us for years.

[DoctorDerek]

Ok, thanks for the info, I guess.

As far as I know Nativewind is abandonware until the guy who made it gets the Expo leadership to allow him to work on it at work.

That could be entirely wrong.

But good luck asking for a maintainer!

[dannyhw]

@francois-pasquier

you just need to change the content array to actually reference the relative path not the node_modules

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../../packages/app/components/TestComponentNative.tsx',
    '../../packages/app/features/home/HomeScreen.tsx',
    './components/**/*.{js,ts,tsx}',
  ],

  presets: [require('nativewind/preset')],
  theme: {
    extend: {},
  },
  plugins: [],
};

note that the web file causes it to crash thats why I specified the paths directly instead of regex

also your nextjs app is not configured to use nativewind so thats why that doesn't work there

[chakrihacker]

if you are using bun workspaces try adding this in your metro.config.js

config.resolver.disableHierarchicalLookup = true;

[EgorPopovPP]

+1

[danstepanov]

@francois-pasquier were you able to implement Danny's suggestion?

[francois-pasquier]

Well, listing all the components is tedious imo

It can get quite large as well…

[dannyhw]

@francois-pasquier the point is to make the regex match the path more correctly, not to specify each one manually

like ../../packages/app/features/**/*.{js,ts,tsx}

[francois-pasquier]

Last time I checked doing it this way for packages resulted in a crash