As I was evaluating tailwind I there was one thing that pushed me over the edge -- intellisense.
The speed that I can go writing styles for my components, it was bliss. Though once I used other libraries like
clsx or HeadlessUI I kinda got annoyed by the lack of intellisense. It wasn't that bad, but enough to bug me.
For example HeadlessUI's Transition component:
Or the clsx library:
so the question is:
How to get intellisense?
Luckily after some searching I found out how.
First go open your workspace settings.
This will create a settings.json
file under a .vscode
folder if you don't already have one. You can define rules within it. The one we're interested about is tailwindCSS.experimental.classRegex
.
In this we define an array of arrays containing regex to match a pattern.
For example using the clsx library:
{
"tailwindCSS.experimental.classRegex": [
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
}
Let's review what happened there.
The first item in the array is an expression to the match container, and the second expression is to match the class lists.
NOTE: Both expressions must contain only one capture group.
If you only have a single class list like the HeadlessUI example, you can specify a single regular expression.
{
"tailwindCSS.experimental.classRegex": [
"(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)"
]
}
You can also use multiple expressions for different contexts
{
"tailwindCSS.experimental.classRegex": [
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
"(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)"
]
}
I know, regex is hard, so heres a repo containing multiple use cases.
https://github.com/paolotiu/tailwind-regex-list
I encourage you to contribute if there are any other use cases that haven't been listed.
Thank you :)
Latest comments (4)
The
clsx
example didn't work for me when passing the classes as a comma separated list.@adamleblanc's regex does make this work, however it seemed to cause some other issues with tailwindCSS.lint.cssConflict
I found this regex to be working without any other issues
Thanks for bringing this up!
Hi, your regex for
clsx
is wrong. Here is the correct one. You need to skip over the,
to get it to work.Thanks for this Adam :D