Set up TailwindCSS intellisense for JavaScript and TypeScript

Tailwind's VS Code extension doesn't detect utility classes in JavaScript or TypeScript declarations by default. But it can be configured to do so, we can add support for data types like strings, arrays, and objects using Regex. In this post, I'll show you how to configure Tailwind intellisense and autocomplete suggestions for Javascript and Typescript variables in VS Code.

A common pattern in web development is setting CSS in Javascript for more control over dynamic styling. However, some custom Regex and configuration is required for Tailwind’s VS Code extension to detect utility classes in Javascript and Typescript.

// full tailwind intellisense support for tailwind in typescript!
const messageStyles: Record<string, string | string[]> = {
  user: [
    baseMessageStyles,
    'ml-auto bg-primary text-primary-foreground break-words',
  ],
  assistant: [
    baseMessageStyles,
    'bg-muted dark:prose-invert prose-code:text-foreground',
  ],
};

Open your VS Code settings.json file

This setting is accessed and edited through the settings.json file in VS Code. To open it, press Ctrl + Shift + P or Cmd + Shift + P open the command palette and type Preferences: Open User Settings (JSON) and press enter. This will open the JSON file containing all global settings for VS Code.

Alternatively, you can search for Preferences: Open Workspace Settings (JSON) to create a local settings.json file in your current directory that only applies settings to your project. This is helpful for setting up specific settings like tailwind regex for a project, without affecting VS Code’s global settings.

Add the Tailwind classRegex setting

Add the following JSON object to your settings.json file.

"tailwindCSS.experimental.classRegex": []

I like using a special name for all my utility class variables. I typically suffix these declarations with Styles, this way I can easily configure my regex to identify them in my code. This keyword can be whatever you want, though.

TypeScript and JavaScript Regex

"tailwindCSS.experimental.classRegex": [
    ["Styles\\s*(?::\\s*[^=]+)?\\s*=\\s*([^;]*);", "['\"`]([^'\"`]*)['\"`]"]
]

This regex is a combination of several options I’ve found through searching and experimentation.

It’ll capture tailwind classes within:

  • Variables ending with a “Styles” suffix, with or without TypeScript types
  • Strings, arrays, or objects
  • Single quotes, double quotes, or backticks

Regex for tailwind libraries like cva and clsx

You also have to add custom regex if you use libraries like cva and clsx to detect utility classes in these functions.

"tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["clsx\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],
]

You can find all this regex along with a host of other options for different libraries and use cases on tailwind-intellisense-regex-list on GitHub. Thanks to Paulo Tiu for putting the resource together!

Another essential VS Code setting for working with TailwindCSS

In your settings.json file, add the following JSON object to improve autocomplete suggestions for tailwind classes. This triggers autocomplete suggestions while typing strings, while the default relies on whitespace to trigger suggestions.

"editor.quickSuggestions": {
  "strings": "on"
}

I learned about this neat trick while reading Sixian Li’s’ blog post, who originally credited it to this tweet.

Resources