DEV Community

Cover image for How to get Tailwind Intellisense anywhere
paolotiu
paolotiu

Posted on • Originally published at paolotiu.com

How to get Tailwind Intellisense anywhere

#tailwindcss #vscode #webdev #css

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:

Top comments (4)

Collapse
 
adamleblanc profile image
Adam LeBlanc • • Edited

Hi, your regex for clsx is wrong. Here is the correct one. You need to skip over the , to get it to work.

    "tailwindCSS.experimental.classRegex": [
      "clsx\\(.*\\)",
      "(?:'|\"|`)([^,)]*)(?:'|\"|`)"
    ],
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tiu profile image
paolotiu •

Thanks for this Adam :D

Collapse
 
stekmo profile image
Stekmo •

The clsx example didn't work for me when passing the classes as a comma separated list.

const classNames = clsx("bg-white", "flex") // No intellisense
Enter fullscreen mode Exit fullscreen mode

@adamleblanc's regex does make this work, however it seemed to cause some other issues with tailwindCSS.lint.cssConflict

Image description

I found this regex to be working without any other issues

"tailwindCSS.experimental.classRegex": [
  ["clsx\\(([^)]*)\\)", "\"([^\"]*)\""]
],
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tiu profile image
paolotiu •

Thanks for bringing this up!

Read next

freakyspeedster profile image

Creating a modern animated cursor for your website

Sridhar Murali -

alakkadshaw profile image

How to use TURN server with PeerJs

alakkadshaw -

julianengel profile image

Migrating Plausible Data Between Instances (Servers)

Julian Engel -

codevsom profile image

Litestyle CSS: A Lightweight Alternative to Full-Fledged Frameworks

Somnath Pan -