[IntelliSense] Custom class name completion contexts

[bradlc]

There has been quite a few requests for the extension to support class name completions in contexts other than a standard class(Name) attribute.

Some examples:

• tailwind.macro and twin.macro (Add scrolling-touch/auto docs #46, Support for tailwind.macro in styled/emotion like tw... or tw.div... tailwindcss-intellisense#123):

  tw`_`
  tw.div`_`
  <Component tw="_" />
  

• tailwind-rn (Add @important at-rule #99):

  tailwind('_')
  

• tailwind-ppx (Algolia's DocSearch ready! ✨ #120):

  <Component className=[%tw "_"] />
  

I just wanted to consolidate all of these requests into a single issue that can be tracked more easily, as I think the solution could be the same for each of them.

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

However, I am open to the idea of adding a user setting which would allow the definition of custom regular expressions. For example for tailwind-rn your regular expression might be something like: /\btailwind\([^)]+/ig

If you're interested in this feature feel free to "watch" this issue for updates, and post any comments/suggestions you may have.

[oldo]

Using tailwind-rn I finally had success with the following:

"tailwindCSS.experimental.classRegex": ["tw\\('([^']*)'\\)"]

[J-Rigondo]

hello.
where is this code? tsconfig?

[Pefington]

settings.json in VSCode

[aquaductape]

For some reason this regex doesn't work

{
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "tailwindCSS.experimental.classRegex": [
    "classList={{([^}]+)}}"
  ]
}

<button
  class="p-2 border border-gray-200 rounded-md"
  classList={{ 'p-4': isDark() }}
>
  Lesson
</button>

Then I had a thought that you can't intellisense object string keys, but you can using the class comment hack. So it is possible to intellisense object string keys.

```js
<button
  class="p-2 border border-gray-200 rounded-md"
  // class="
  classList={{ 'p-4': isDark() }}
  //"
>
  Lesson
</button>

So this regex should work as it does here https://regex101.com/r/5I3Fsb/1

[carere]

Hello, I may found a solution, you can try this regex, it works for me :)

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

Hope it helps ;)

[Axedyson]

Hey @bradlc I'm getting the following error:

Hovering, linting and autocompletion doesn't work for me. Does it have something to do with the limit? If so, can it be increased somehow?
The problem occurs in this repo: https://github.com/AndysonDK/syncbase/tree/59c7026584576f006925f6bcee60c80bd581dad9

• Should this be converted into it's own dedicated issue? I've done it just in case

[jussivirtanen]

I'm using Tailwind classes as strings stored into a variable:

const baseStyles = 'bg-green-700 text-white'

If you're using this convention, adding .*Styles* to the tailwindCSS.classAttributes in your VSCode settings.json should do the trick.

The setting

With the UI

With settings.json

The result

Hope this helps! :)

Edit: This approach also works with nested objects:

[ackvf]

Actually it doesn't seem to be working, which is weird. I think it has worked. Stripping array immediately fixes it.

I had to revert to this #7554 (comment)

[prince272]

Added support for character quotes: ` " '

    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\n;.])", "[\"'`]([^\"'`]*).*?[\"'`]"],
    "\\S*[Cc]lass[nN]ame\\S* ?[:=] [\"'`](.*)[\"'`]",
    "return [\"'`](.*)[\"'`]",
    ["return \\(?{([\\s\\S]+?)}\\(?\\s", "[\"'`]([^']*)[\"'`]"],
    ["\\S*[Cc]lass[nN]ame\\S* = {([\\s\\S]+?)}\\s", "[\"'`]([^']*)[\"'`]"],

[ploca14]

This works for me in .ts files but it does not work in Vue <script setup lang="ts"> block. Is there a way to make it work in there too?

[filipbekic01]

Not working in script setup lang ts either.

[jdgamble555]

This is incorrect. This specifies attributes, not variable names for anyone who comes across this.

[techno-disaster]

Quick question, any idea why code completion and hovering both work but linter does not? (have some typos in tailwind classes but the plugin can't detect them)

changes to settings

    "tailwindCSS.includeLanguages": {
        "dart": "javascript"
      },
    "tailwindCSS.experimental.classRegex": [
        "className\\:\\s*'([^']*)'",
    ]
    ```

[DennisRosen]

Hi, I just tried the classRegex setting mentioned here before in vs code:

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)",
  ["classnames\\(([^)]*)\\)", "'([^']*)'"]
]

This works fine until I have a larger classnames call with lots of arguments/classes to apply, then the intellisense stops working around 1000 characters. Is it possible to overcome this limitation in vs code?

[uwemneku]

For react components, this regex works for component names ending with Class
"[a-zA-Z]*Class\\s?=\\s?[`|\"]([^`]*)"

[stillhart]

Just wanted to mention that for ruby / rails html.erb files the following configuration works. Locate the following configuration in Vscode:
Tailwind CSS › Experimental: Class Regex

Press Edit in settings.json and add this configuration

"tailwindCSS.experimental.classRegex": [
  "class: ['\"](.+?)['\"]" // class: "..." // ruby .html.erb    
],

Editing any erb files should now result in the following looks:

[gabrielmlinassi]

I'm using it like this. IntelliSense works but auto-sorting does not. Does someone know why?

{
  "tailwindCSS.experimental.classRegex": [
    "\\/\\*\\s?tw:\\s?\\*\\/\\s?`(.*)`"
  ]
}

const classes = {
  root: /*tw:*/ `group inline-flex flex-col`,
  fullWidth: /*tw:*/ 'w-full',
  label: /*tw:*/ `mb-2 text-white`,
};

[jussivirtanen]

@depsimon, yes there is! Check my comment about using tailwindCSS.classAttributes. Here's the approach in action:

[depsimon]

Aha, it does work indeed, thanks :)
I can now remove the Regex I guess.

Though, when using with Typescript it seems it's ignored.

const variantThemeClasses: VariantThemes = {
  default: {
    primary: 'bg-gray-900 text-white',
    secondary: 'bg-gray-500 text-gray-900',
  },
  red: {
    primary: 'bg-red-500 text-white',
    secondary: 'bg-red-200 text-red-700'
  }
}

Do you have an idea to support that?

[jussivirtanen]

Great that you got it working! To get the same approach working with types, add this (or whatever naming scheme you're using) to your tailwindCSS.classAttributes:

  "tailwindCSS.classAttributes": [
    "class",
    "className",
    ...
    ".*Styles",
    ".*Styles: .*", <-- This should fix your issue.
  ],

Here's how it works on my setup:

[depsimon]

You're the boss. Thanks a lot

[jussivirtanen]

You're most welcome, glad I could help! 🤗

[chase-lambert]

Hey, thought I would share this for those who end up here when looking for a Clojure or ClojureScript solution like I did. Some nice folks on the Clojure slack helped me find this full solution that gives you autocompletion using both styles of hiccup (eg. [:h1 {:class "text-3xl font-extrabold mt-6"} "Hello, World!] and [:div.text-3xl.font-extrabold.mt-6 "Hello, World!]):

 "tailwindCSS.experimental.classRegex": [                                                       
    ":class\\s+\"([^\"]*)\"",                                                                    
    ":[\\w-.#>]+\\.([\\w-]*)"                                                                    
  ],                                                                                             
  "tailwindCSS.includeLanguages": {                                                              
    "clojure": "html"                                                                            
  }   

[strativd]

Here's my VS Code settings.json to add Tailwind IntelliSense within objects and variables who's name ends with "Classes":

  "tailwindCSS.experimental.classRegex": [
    ["Classes \\=([^;]*);", "'([^']*)'"],
    ["Classes \\=([^;]*);", "\"([^\"]*)\""],
    ["Classes \\=([^;]*);", "\\`([^\\`]*)\\`"]
  ],

Tailwind IntelliSense will now recognize all of the following strings:

const defaultClasses = `text-grey`;

const componentClasses = {
  default: 'text-grey',
  danger: `text-red`,
  warning: "text-yellow",
};

Note: the regex matches code blocks that start with Classes = and ends with ; — you can replace Classes = with your own matcher to work with your own workflow :)

[johot]

Awesome! Thank you!

[TristanBrotherton]

Has anyone figured out a way to get the intellisense tooltips to display on tailwind classes in a TS variable?

[strativd]

Here's my example from stackoverflow. You can change the Regex in settings.json to match something other than Classes \\= — for typescript that might be Type \\= or Interface . GL!

[bradennapier]

Put together a few variations:

twMerge is tailwind-merge and supports the various strings and terminates properly when finished. It also works with twJoin which is a simple classnames like setup without processing the collisions.

/* tw */ can be used if wanting quick and dirty

twc (tailwind classes) is just :

/**
 * This is simply used to make it easier to write Tailwind classes that include
 * intellisense in various places
 */
export const twc = String.raw;

To make it easier when working with arbitrary value situations

"tailwindCSS.experimental.classRegex": [
    "\\/\\*\\s*tw\\s*\\*\\/\\s*[`'\"](.*)[`'\"];?",
    ["(?:twMerge|twJoin)\\(([^\\);]*)[\\);]", "[`'\"]([^'\"`,;]*)[`'\"]"],
    "twc\\`(.*)\\`;?"
  ],

[ackvf]

This will detect a container consisting of className = [] string and its variants such as ButtonClassNamesXyz Classname and whatever is inside [ ] will be processed. I have also added detection for ] inside the actual classname string.

  "tailwindCSS.experimental.classRegex": [
    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\s;,.])", "'([^']*)'"],
    "return '(.*)'",
  ],

Adjust regex here https://www.debuggex.com/r/yhCYrsFdzXRWQEhP

https://stackoverflow.com/questions/66614875/how-can-i-enable-tailwind-intellisense-outside-of-classname/74855906#74855906

[ackvf]

More advanced version

    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\n;.])", "'([^']*)'"],
    ["\\S*[Cc]lass[nN]ame\\S* = {([\\s\\S]+?)}\\s", "'([^']*)'"],
    "\\S*[Cc]lass[nN]ame\\S* ?[:=] ['`](.*)['`]",
    "return '(.*)'",
    ["return \\(?{([\\s\\S]+?)}\\(?\\s", "'([^']*)'"],
    ["twMerge\\(([\\s\\S]+?)\\)\\s", "'([^']*)'"],

[TristanBrotherton]

Can anyone confirm or deny that it is not possible to get the popover definition to display using any of these methods?

[jussivirtanen]

@TristanBrotherton, if you mean getting the Tailwind class autocompletion working, for example, with variables, then yes, that's doable! Here's a solution I'm using, maybe that helps?

[kytosai]

Extension development team should have official sample configs in the document to guide users to add autocomplete for packages like clsx, classnames,...

As it is now, everything is not clear

[paolotiu]

I created a repo for this last year. Is this something like what you're looking for?
Repo

[paolotiu]

Hello everyone! Setting up regex for each library is hard, so I made a repository that tried to collect all the configs needed for intellisense to work. Right now it has most of the popular libraries handled, but I would love to add lots more!

Link to repo: https://github.com/paolotiu/tailwind-intellisense-regex-list

[joaopedrodcf]

This is a life saver regex list to make the intellisence work 💯

[paolotiu]

Thanks for the nice words!

[asv7c2]

Hello. I use Tailwind with sveltekit and created such regex for string completion:

"tailwindCSS.experimental.classRegex": [
    [".*Class\\s?=\\s?([\\s\\S]*)", "(?:\"|')([^\"']*)(?:\"|')"]
  ]

Completion is works, but hovering info is not working in *.svelte files. In *.js is working. I missed something?

[jdgamble555]

This is great, but sorting does not work.

[webmasterpf]

Hello;

File association doesn't work every time. Weird thing, after added css and scss file associated to tailwind. What could be wrong ?

[prestonbourne]

Has anyone managed to get this working with function args. I'm particularly looking for cva, clsx and classnames

[paolotiu]

You can find some examples here https://github.com/paolotiu/tailwind-intellisense-regex-list

[agusterodin]

Whatever you end up doing, it would be amazing if Prettier was able to pick up on the same pattern!

I am using "tailwindCSS.experimental.classRegex": ["*className"]

It works perfectly with the IntelliSense plugin (both for constants in files as well as component attributes) but doesn't get formatted by Prettier.

[Jorundur]

@agusterodin

Until the prettier tailwind plugin adds better support for this use case I have a temporary solution.

The plugin allows sorting of tagged template literals via templateFunctions.

I.e.

import tw from "twrnc";

function Button({ isHovering, children }) {
  let styles = tw`rounded py-2 px-4 text-base bg-blue-500 text-white hover:bg-blue-700`

  return <View style={styles}>{children}</View>;
}

with prettier.config.js as

module.exports = {
  ...something,
  tailwindFunctions: ['tw'],
};

I just created my own dummy tw tagged template literal function which accepts a template string and exports it as is:

/** A tagged template literal function which accepts a string and returns it un-modified.
 *
 * The purpose of this function is to sort strings containing Tailwind classes.
 * We can prepend "tw" to template strings that are intended as
 * Tailwind classes and allow the tailwind prettier plugin to sort it.
 *
 * I.e. Creating a variable like so:
 * const twClasses = tw`text-red-100 bg-white-100`;
 * will tell the tailwind prettier plugin to sort the classes.
 */
export const tw = (strings: TemplateStringsArray, ...values: string[]): string =>
  /**
   * The purpose of the reduce function is to make sure we can pass in a template string
   * with variables and get the correct result. I.e. `Hello I am ${name}`
   * will return `Hello I am Jörundur` if `name` is `Jörundur`.
   */
  strings.reduce((result, stringPart, i) => result + stringPart + (values[i] || ''), '');

Then I can use it like so:

import { tw } from './path/to/tw/function';

export const twClasses = tw`
  h-4
  w-full
  appearance-none
  rounded-2
  outline-none
  disabled:opacity-40
  [&::-moz-range-thumb]:h-24
  [&::-moz-range-thumb]:w-24
  [&::-moz-range-thumb]:rounded-full
  [&::-moz-range-thumb]:border-[3px]
  [&::-moz-range-thumb]:border-solid
  [&::-moz-range-thumb]:border-red-100
  [&::-moz-range-thumb]:bg-white-100
  [&::-moz-range-thumb]:transition-all
  [&::-moz-range-thumb]:hover:shadow-lg
  [&::-moz-range-thumb]:active:h-32
  [&::-moz-range-thumb]:active:w-32
  [&::-webkit-slider-thumb]:h-24
  [&::-webkit-slider-thumb]:w-24
  [&::-webkit-slider-thumb]:appearance-none
  [&::-webkit-slider-thumb]:rounded-full
  [&::-webkit-slider-thumb]:border-[3px]
  [&::-webkit-slider-thumb]:border-solid
  [&::-webkit-slider-thumb]:border-red-100
  [&::-webkit-slider-thumb]:bg-white-100
  [&::-webkit-slider-thumb]:transition-all
  [&::-webkit-slider-thumb]:hover:shadow-lg
  [&::-webkit-slider-thumb]:active:h-32
  [&::-webkit-slider-thumb]:active:w-32
`;

• Prettier plugin works - i.e. it automatically sorts these classes because it knows it should sort strings within template literal preceded by tw
• Tailwind intellisense plugin also works in VSCode via this setting in my Workspace settings for VSCode:

{
  ...
  "tailwindCSS.experimental.classRegex": ["\\S*Classes\\S* ?[:=] tw['`]((.|\\n)*)['`]"],
}

[agusterodin]

That's the solution I arrived at as well 😃

clsx (the conditional classname library) supports tagged template literals out of the box btw. I switched from classnames to clsx for this reason alone.

[Jorundur]

Cool! Does Intellisense work when using clsx out-of-the-box or did you need something in tailwindCSS.experimental.classRegex for that to work?

[agusterodin]

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

[Jorundur]

If anyone else runs into this thread I'd like to add that my regex ended up like this:

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

The second line is from the clsx docs, the first line is for the Intellisense recognizing tw classes inside a tagged template string like so:

export const classes = clsx`
  h-4
  w-full
  appearance-none
  rounded-2
  outline-none
  disabled:opacity-40
`;

[tsp1998]

For svelte users,

"tailwindCSS.experimental.classRegex": [
        "class:(.+)"
    ]

[Neo-Ciber94]

Want to point out you can use this as guide to create your custom regex:

https://github.com/paolotiu/tailwind-intellisense-regex-list

[mickaelchanrion]

Any reason this is not documented in the README? It took me some time to end up here 😅

[GabrielFNLima]

For those who use Webstorm, this worked for me.

Go to: Setting > Languages & Frameworks > Style Sheets > Tailwind CSS

At the bottom of the JSON configuration, you can add the regex

{
//...
 "experimental": {
    "classRegex": ["composes: ([^;]*)"]
  }
}

https://www.jetbrains.com/help/webstorm/tailwind-css.html

[mi-na-bot]

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

The official plugin prettier-plugin-tailwindcss actually does offer a solution for using functions like clsx classNames cva. This is accomplished by providing function names for which calls contain tailwind css.
https://www.npmjs.com/package/prettier-plugin-tailwindcss#sorting-classes-in-function-calls

Actually this is very helpful because in general function calls are not parsable using regular expressions, JS being an irregular language. It covers template literals as well (which are functions). This is very easy in prettier where an AST is already present, but is such a thing impossible in this plugin?

[Pentadome]

.vscode\settings.json

{
  "tailwindCSS.experimental.classRegex": [
    // Outer selector tw() - Inner selector '' or "" or ``
    ["tw\\(([^)]*)\\)", "(?:')([^']*)(?:')"],
    ["tw\\(([^)]*)\\)", "(?:\")([^\"]*)(?:\")"],
    ["tw\\(([^)]*)\\)", "(?:`)([^`]*)(?:`)"]
  ],
}

tw.ts

/**
 Use tailwind intellisense
 
 see: `.vscode\settings.json`
 regex defined by `tailwindCSS.experimental.classRegex`
 should match the literal string argument passed to this function.

 @returns the argument as is.
  */
export const tw = <T extends string>(classes: T) => classes;

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],

  "tailwindFunctions": ["tw"]
}

package.json

{
  "devDependencies": {
    "prettier-plugin-tailwindcss": "latest",
  }
}

This setup works great. Hope this helps anyone

[smile-alive]

Hi, I’m using CDN to include Tailwind CSS in HTML, but I’m facing an issue with the lack of IntelliSense in VSCode. I’ve configured tailwind.config.js, which enables IntelliSense in

tags, but it doesn’t work in template strings. What should I do?

[fireMan-34]

Try to reload VSCode , extension server will reload config.

[ollyde]

For anyone else that's stuck with Expo and twrnc

Here is the config that finally works for me.

Workspace user settings

{
    "editor.quickSuggestions": {
      "strings": true
    },
    "tailwindCSS.experimental.classRegex": [
      ["tw`([^`]*)`"],
      ["style=\\{tw`([^`]*)`\\}"],
      ["style=\\{\\[tw`([^`]*)`"],
      ["tw\\(([^)]*)\\)"]
    ],
    "tailwindCSS.includeLanguages": {
      "typescript": "javascript",
      "typescriptreact": "javascript"
    },
    "tailwindCSS.classAttributes": [
      "class",
      "className",
      "style"
    ]
  }

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Wild Strawberry
        primary: {
          '50': '#fef1f8',
          '100': '#fde6f3',
          '200': '#fecce7',
          '300': '#fea3d2',
          '400': '#fc6ab3',
          '500': '#f63691',
          '600': '#e61c72',
          '700': '#c80e57',
          '800': '#a50f48',
          '900': '#8a1140',
          '950': '#550221'
        },
      }
    },
  },
  plugins: [],
}

tw.config.ts

import { create } from 'twrnc';

// Load from file
const tailwindConfig = require('@/tailwind.config.js');

const tw = create({
  theme: tailwindConfig.theme,
});

export default tw;

Now it works with

import tw from '@/app/utils/tw.config';

Additional files
postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

[abloom12]

Trying to get intellisense to work with element.className

Has anyone ran into this issue and had success in finding a solution?

[jucegt]

You can find the configuration for this in @paolotiu repository

In the DOM section