Integrating Nativewind in an npm Package

[ARJohnsonKwik]

I'm developing an npm package with components styled using Nativewind. However, I've encountered challenges ensuring the styles apply when the package is imported. Has anyone successfully embedded Nativewind styles directly within an npm package, allowing for the styled components to be used out-of-the-box? I'm looking for any type of solution.

Is it even possible? I can't seem to find any npm packages at all using Nativewind for styling.. @marklawlor

[ioss]

I guess your problem is the missing extraction of tailwind classes you are using in your components (into the using project).
This is not very different to normal tailwind component libraries.
(That is probably, why the more prominent ones are working with "copy the source code of the components you need into your project")

If this is your problem, you just have to make sure, all tailwind classes that your package uses are somehow "visible" to the tailwind used in the dependent project.

One solution to that would be to add the path to your npm packaged components to the content of tailwind.config.js. Something like ./node-modules/YOUR_PACKAGE/distOrSoOrSrcOrWhatever/**/*.js.
Another solution would be to create a tailwind plugin, that makes sure, that all tailwind classes the package uses are added to the "generated css"

The first one is easier to maintain, but might feel strange. The later requires to do manual bookkeeping of the used classes, or do extraction at build time and generate a plugin out of the result.

[ARJohnsonKwik]

Yea, I would love to figure this out. Thanks for the advice. I'll look into both suggestions. If you happen to actually do this and it works please share the code.

[CTOverton]

@ARJohnsonKwik looking to do the same, please share if you find a good solution!

I also wonder if it is possible to compile the styles before the package is deployed so that the consuming project doesn't need to setup nativewind.