Intellisense is lost as soon as I import anything from twrnc inside the tailwind.config file

[joaocdvr]

What

I followed the guide on VS Code Intellisense and it works perfectly, as long as I don't import anything from twrnc inside the tailwind.config.js file.

// tailwind.config.js
const { plugin } = require("twrnc");

/** @type {import('twrnc').TwConfig} */
module.exports = {
  content: [`**/*.{js,ts,jsx,tsx}`],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        test: {
          flex: "1 1 0%",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
        },
      });
    }),
  ],
};

This ⬆️ works fine, the test class exists and the styles are applied properly, the issue is that I lose intellisense. Even if I comment out the custom plugin function, if I keep the twrnc import, intellisence doesn't work.

On the other hand, if I use the plugin function from tailwindcss/plugin, intellisense works for every class that isn't part of a plugin:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [`**/*.{js,ts,jsx,tsx}`],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        "test": {
          flex: "1 1 0%",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
        },
      });
    }),
  ],
};

If I use the "normal" tailwind plugin syntax and write the class as .test instead of test, I have intelisense in every class (including the test class) but the styles aren't applied and I get a 'test' unknown or invalid utility warning.

Is this a known issue? Is there a workaround?

Notes

For reference, I have the Tailwind CSS IntelliSense (bradlc.vscode-tailwindcss) plugin installed with the following settings:

// .vscode/settings.json
{
  "tailwindCSS.classAttributes": ["style"],
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ]
}

[kyimoemin]

same here

[jaredh159]

@joaocdvr hmmm... i wouldn't call it a known issue, no. but i don't use vscode, so this whole area is something i'm not super clear on, and mostly leave to the community to help each other out.

that said, the twrnc plugin function is supposed to be interchangeable with the one from tailwindcss, so there shouldn't be any downside to using the latter. does that work for you? is there something preventing you from using that as a workaround?

[joaocdvr]

Hey @jaredh159, in the first example of the issue's description I'm using twrnc's plugin function but as soon as I import anything from twrnc inside the tailwind.config.js file I lose all intellisense unfortunately. I could just use tailwind's plugin function but it expects the classes to be prefixed by a . for intellisense to work but if I do that I get 'test' unknown or invalid utility warning in react-native and the styles aren't applied. Here's a screen recording that highlights the issue:

https://github.com/jaredh159/tailwind-react-native-classnames/assets/63152281/b315350e-0e98-49c2-9f39-9a45215dd5b8

I guess ideally I could prefix the classes with a . like you do usually with tailwind and the styles would still be applied 🤔 Would that be possible? Thanks for looking into this btw 🙏

[jaredh159]

@joaocdvr thanks for the video. seems like the simplest way to fix this is to have twrnc support leading dots in custom utilities, and then steer people towards using them (and the tailwindcss/plugin function) in the docs.

i've got a pull request open that i think accomplishes that, see: #236

would you mind testing it to see if it fixes things for you? i released a beta version, you can install it with npm install twrnc@next and you should get v3.6.2-beta which has the changes from that PR.

[joaocdvr]

Damn, amazing, it works! Thank you @jaredh159 🙏

But just so you know, it only works if I import the tailwindcss/plugin function, as soon as I import anything from twrnc the intellisense is broken

Just realised that that's what you meant by also steering people to use tailwindcss/plugin function after looking at your README changes 🤦

[joaocdvr]

Just to be clear, atm the only plugin I can create is a utility with the addUtilities function, correct?

[jaredh159]

Just to be clear, atm the only plugin I can create is a utility with the addUtilities function, correct?

yup, that's correct, for now at least.

thanks for testing, i think i'll merge #236 and cut a non-beta release 👍

[joaocdvr]

@jaredh159, just so you know this also breaks intellisense, I guess because it's unexpected by the Tailwind CSS Intelissense plugin

[jaredh159]

@jaredh159, just so you know this also breaks intellisense, I guess because it's unexpected by the Tailwind CSS Intelissense plugin

ok, thanks for letting me know. not sure there's an easy fix for that. 🙁

[joaocdvr]

I think it's a cool feature but tailwindcss-intellisense would have to support it and I guess that would only happen if tailwindcss itself started supporting that syntax as well 🤔