Custom class attribute name.

[Giorno-Giovana]

We use a custom react ui kit that uses the `UNSAFE_className ' attribute as props. Class compilation doesn't work for them. How about adding some way to customize your regular expression search?

classNameVariants: ['UNSAFE_className']

function App() {
  return <SomeCustomReactComponent UNSAFE_className={'mt-8'} />
}

function SomeCustomReactComponent({ UNSAFE_className }) {
   return <div className={UNSAFE_className} />
 }

[wongjn]

You could try customizing the tailwindCSS.classAttributes setting:

tailwindCSS.classAttributes

The HTML attributes for which to provide class completions, hover previews, linting etc. Default: class, className, ngClass, class:list

[Giorno-Giovana]

You're talking about intellisense. I'm talking about the fact that tailwind don't generate classes, because the tailwind compiler doesn't perceive strings inside UNSAFE_className as something that needs to be compiled.

[wongjn]

I see! Thank you for the clarification.

Tailwind should generate classes inside UNSAFE_className as long as the App() function code is covered by the content file globs in the Tailwind configuration. This is because Tailwind is language-agnostic. It does not actually "run" your code in anyway. Tailwind scans for classes in files as plain text. You can think of it like Tailwind perceives every file as a .txt file instead of a .js file.

See this Stackblitz project of your code working.

[Giorno-Giovana]

Yes, I know what you're talking about. But in this case, we use a separate library, which we are not responsible for the code. And in the components provided by this library, classes are passed through UNSAFE_className, which is why type does not work. I suggest adding the capability to specify mapping attributes in tailwind.tailwind.js. For example:

classNameVariants: ['UNSAFE_className']

Passing a list of html attributes to the array that should be perceived by tailwind as something that contains tailwind classes, and, therefore, should be taken by the tailwind compiler in the assembly

[wongjn]

classes are passed through UNSAFE_className, which is why type does not work.

I'm not sure what you mean by "type" here.

I suggest adding the capability to specify mapping attributes in tailwind.tailwind.js

tailwind.tailwind.js is not a file that Tailwind uses – do you perhaps mean tailwind.config.js?

But in this case, we use a separate library, which we are not responsible for the code. And in the components provided by this library, classes are passed through UNSAFE_className

This shouldn't matter. As long as the the strings that you pass to UNSAFE_className are contained in the file that the content file globs cover, the Tailwind class names should be generated, as per my previous comment. Perhaps if you could provide an example project, it could help clarify matters?