How to use tailwind in react native lib

[huyvvbka]

I use react-native-builder-bob to write shared components for multiple projects, now I want to use https://www.nativewind.dev/ to style the component. Can you guide me to integrate https://www.nativewind.dev/

[atlj]

It's actually pretty straightforward. When you create a new react native library using npx create-react-native-library, you get two separate packages. The one you get at the root level is your library, and the one inside the example/ folder is an example app that you can use to test the library.

For your library, you will want to add nativewind as a peerDependency, and devDependency. Adding it as a peer dependency ensures whenever you install the library to an app, it gives a warning if native wind is not installed. And it's a dev dependency since you don't want to bundle it in the library package.

For your example app (and any apps you will install this library in the future), you will want to follow the installation steps of native wind and make sure it's installed correctly. Also make sure your library and the example app (and any apps you will use the library in the future) has the same versions of native wind.

As far as I understand, the crucial step of running native wind is adding it's babel plugin to your app. You don't need to do this inside your library. Just make sure you add this plugin to your app and you should be good to go.

[huyvvbka]

Thank you very much. What I want here is to use both nativewind to style the lib and the app. For consistency on how to use style. I tried the nativewind setup for the lib and it didn't work the same as the setup for the app

[atlj]

Hey, please take a look at the following example repo I've created:
https://github.com/atlj/builder-bob-nativewind-example

Make sure to read the README file. The important step is within the tailwind config of the app.

You can see the whole diff of the change here

[huyvvbka]

Thank you very much, I will give it a try.

[frederik-oestergaard]

I have same issue but with NativeWind 4, does anyone know how to configure NW 4 to work in this setup? seems the correct styles are getting generated inside node_modules/.cache/ but the styles are not being applied to components coming from published package. I have configured tailwind.config as shown in example provided by @atlj above.

[atlj]

@frederik-oestergaard I'm not super familiar with nativewind but have you also added the babel plugin to your example app?

[frederik-oestergaard]

Yes, NativeWind is also working correctly in the app, just not on the components coming from the publishable package.
However i think this is related to how NativeWind works, probably not something with how builder bob configured things for us.