Custom classRegex with class suggestions but no hover preview

[yunsii]

What version of VS Code are you using?

v1.87.2

What version of Tailwind CSS IntelliSense are you using?

v0.10.5

What version of Tailwind CSS are you using?

v3.3.3

What package manager are you using?

pnpm

What operating system are you using?

WSL

Tailwind config

import type { Config } from 'tailwindcss'

/** @type {import('tailwindcss').Config} */
const config: Config = {
  // corePlugins: {
  //   preflight: false,
  // },
  content: ['./src/**/demos/**/*.{ts,tsx}', './docs/**/*.{ts,tsx,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default config

VS Code settings

{
  "tailwindCSS.experimental.classRegex": ["tw`((\\S|\\s)*?)`"]
}

Reproduction URL

https://github.com/yunsii/tagged-classnames-free/blob/master/docs/pages/examples/demos/demo1/index.tsx#L11-L19

Describe your issue

It has class suggestions but no hover preview.

[gremo]

Same here:

  "tailwindCSS.experimental.classRegex": [
    "cva\\(([^)]*)\\)",
    "html_classes\\(([^)]*)\\)"
  ],

[thecrypticace]

Hey! So this has to do with what the capture group inside the regex represents and how it is used within Intellisense. Completions generally happen in any "a class can be anywhere around this area" context. While hovers have to match class names as best it can to what might be a class — only then do we go look it up to give you the definition. In many cases these contexts can be the same but in a case like this they are not.

I've taken the regex from above and highlighted the ranges of text Intellisense thinks could be "class-like" in purple:

You'll notice that you see things like 'font-bold, underline', or 'italic':. This is because when searching for classes inside a class regex we're pretty permissive in what we consider to be the boundary of a class.

If you were to change your classRegex setting to define patterns for:

1. the container — the block(s) of text that may contain one or more class lists
2. the class list itself — the block of text that contain one or more classes — in this case inside a string literal

{
  "tailwindCSS.experimental.classRegex": [
    ["tw`((?:\\S|\\s)*?)`", "'([^']+)'"]
  }
}

It'll look at these instead:

• The gray represents the container
• The orange represents a class list
• The purple represents a class name

Now this doesn't pick up everything but you can define multiple class lists:

{
  "tailwindCSS.experimental.classRegex": [
    ["tw`((?:\\S|\\s)*?)`", "'([^']+)'"],

    // For now, it's important that this comes second.
    "tw`((\\S|\\s)*?)`"
  ]
}

Doing this will consult each of the regexes in turn for possible classes and you'll get the results you expect:

Hope that helps! ✨

[yunsii]

@thecrypticace Thanks for your patient explanation, it works like a charm 🫡