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 :)
Top comments (4)
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
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!