Closed yunsii closed 2 months ago
Same here:
"tailwindCSS.experimental.classRegex": [
"cva\\(([^)]*)\\)",
"html_classes\\(([^)]*)\\)"
],
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:
{
"tailwindCSS.experimental.classRegex": [
["tw`((?:\\S|\\s)*?)`", "'([^']+)'"]
}
}
It'll look at these instead:
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! ✨
@thecrypticace Thanks for your patient explanation, it works like a charm 🫡
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
VS Code settings
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.