IntelliSense configuration

[demeralde]

Headless UI should include an IntelliSense configuration for VSCode by default.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

I'm confused what you mean exactly. Can you elaborate on what you want specifically?
Headless UI is a JS library written in TypeScript, meaning that vscode should already provide you intellisense and code completions.

If you are talking about usage with tailwindcss, then that should also already work, since code completion for tailwind works in class and className props already.

[demeralde]

@RobinMalfait sorry I specifically meant using TailwindCSS IntelliSense with Transition components:

<Transition
  show={editing}
  enter="transition-opacity transition-transform duration-75"
  enterFrom="opacity-0 -translate-y-5"
  enterTo="opacity-100 translate-y-0"
  leave="transition-opacity transition-transform duration-150"
  leaveFrom="opacity-100 translate-y-0"
  leaveTo="opacity-0 -translate-y-5"
>
  children
</Transition>

These props aren't className, so it doesn't work.

I tried adding a custom config for this:

{
  "tailwindCSS.experimental.classRegex": [
    "enter=\"([^\"]*)", // <div enter="..." />
    // ...
  ]
}

But that didn't work either.

[MichaelAllenWarner]

Some "official" recommended way of supporting this would indeed be nice.

My solution is to do this in .vscode/settings.json:

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

and then use syntax like this in the JSX:

<Transition.Child
  enter={/* tw */ 'ease-out duration-300'}
  enterFrom={/* tw */ 'opacity-0'}
  enterTo={/* tw */ 'opacity-100'}
>

[yc-codes]

Create a file in your project .vscode/settings.json

{
    "tailwindCSS.classAttributes": [
        "class",
        "className",
        "ngClass",
        "enter",
        "enterFrom",
        "enterTo",
        "leave",
        "leaveFrom",
        "leaveTo",
    ]
}

[bibekjodd]

best solution