Nativewind css is not applied

[SachinK25]

I am installing the library and applying the nativewind css to library component but it is not working. At the same time the for default components the nativewind styling is working. @daboigbae

[nagasrinivas123]

yes, it is not working for me also any solution ?

[keygun-development]

A bit late, I just started working using nativewind and react-native. I was looking for a react-native-component-library and came across this github repo.

My scenario

My scenario is similar to the described issue, so i might aswell leave my fix here, maybe it will still help others out.

So for me when using tailwind for the library components and then installing the library and building for ios or android the tailwind styles didn't apply, but it did for web and when using nativewind in my components inside my own project (not the library) it also worked.

Solution

• Add: "nativewind/babel" to the babel.config.js
• Add a css file to the library e.g. index.css with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

• Make sure the css file is included in the bundle.
• Then in your project's css file add:

@import './node_modules/react-native-component-lib/path/to/index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

• Make sure to import "./global.css" in your project's app.tsx file.
• Also add the following line to your tailwind.config.js: "./node_modules/react-native-component-lib/**/*.{js,jsx,ts,tsx}",

I'm not using this repo to create a component library, but in general it should have nothing to do with what library you're using or how you're creating it. This should resolve your problem. Let me know if you have any questions.