DEV Community

loading...
Cover image for How to get Tailwind Intellisense anywhere

How to get Tailwind Intellisense anywhere

paolotiu
Creating...
Originally published at paolotiu.com ・2 min read

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:

HeadlessUI Without Intellisense

Or the clsx library:

clsx Without Intellisense

so the question is:

How to get intellisense?

Luckily after some searching I found out how.

First go open your workspace settings.

Command Palette

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\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}
Enter fullscreen mode Exit fullscreen mode

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.

Container and 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*(?:\"|')([^(?:\"|')]*)"
  ]
}
Enter fullscreen mode Exit fullscreen mode

You can also use multiple expressions for different contexts

{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    "(?:enter|leave)(?:From|To)?=\\s*(?:\"|')([^(?:\"|')]*)"
  ]
}
Enter fullscreen mode Exit fullscreen mode

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 :)


Links:


Discussion (0)