Problems with twrnc plugin with tailwind extension

[Bryant-Anjos]

Hello! I've find two errors when importing the twrnc plugin in tailwind.config.js:

const { plugin } = require('twrnc')

The first error is that the Tailwind extension throws an error:

The second error is that the tailwind intelisense stop working. I'm using the config above for VSCode:

"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)", // tw(Component)`...`
    "tw\\.style\\(([^)]*)\\)" // tw.style("...")
]

[jaredh159]

I've seen the tailwind intellisense error as well. I think it has to do with the fact that react-native (which twrnc depends on an imports) only ships ESM, not commonjs. I think you get the error just once per session, I just ignore it. I would raise an issue with the tailwind css intellisense vscode plugin if you wanted to fix that, I don't think it's a problem specifically with this library.

As far as your intellisense not working, there's an open issue with people sharing their configurations, have you checked it out? #78

[Bryant-Anjos]

@jaredh159 the errors are related. When the plugin crashes the intellisense stops working.
I'm using the configurations of #78, they works well until import the plugin in the tailwind.config.js.

As the tailwind.config.js only works with commonjs would it be good if the plugin was also written in commonjs? Or does it needs to be ESM?

[jaredh159]

I'm not sure exactly the source of the problem to be honest. I don't experience the problem of intellisense not working in my apps, and I think I'm using the same vscode extension, because I see that error sometimes. I always just ignore it, and I don't seem to lose intellisense. but I also would say that I don't heavily rely on intellisense, so if it did stop working, I'm not 100% sure I would always notice.

About the actual error and commonJS/ESM, I'm sort of guessing there as well, I can't give you a super solid answer. I'm pretty sure that the whole react-native npm package ships ESM only, because it tends to cause problems integrating things like Jest, which I've run into before. And my hunch is that the tailwind intellisense plugin is just encountering the same issue.

If you're open to digging in and troubleshooting, and looking for the root cause (either in this library, or in the vscode extension), that would be fantastic, I'm sure other's would appreciate it as well. Maybe someone from that repo could chime in and help out.

[sapjax]

same issue here, just write :

const { plugin } = require('twrnc')` 

will cause tailwind intelisense not working.
but the thing is weird if I write as

const plugin = require('tailwindcss/plugin')

there's no problem then.
maybe something in twrnc causes the problem, not the plugin part.