How can I enable tailwind intelliSense outside of "className"?

Question

I'm using the tailwind CSS intellisense vscode extension, and it seems to only work when typing inside a className property.

I'm using a package called cntl https://www.npmjs.com/package/cntl to help write more maintainable classNames, however, using this package, I lose the intelliSense support.

Is there any way to manually configure so that I get the intelliSense when writing my cntl?

const title = cntl`
  text-3xl
  // I'd like intellisense here
`

Doglike

You can see more examples here: github.com/tailwindlabs/tailwindcss-intellisense/issues/129 – Gneiss

Answer 1

I realize this Q is old, but it still shows up in search so I wanted to share my workflow :)

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, like. cntl :)

Aggressive

great, even you can get rid of the semi if you're not using it, "tailwindCSS.experimental.classRegex": [ ["ClassNames \\=([^]*)", "'([^']*)'"], ["ClassNames \\=([^]*)","\"([^\"]*)\""], ["ClassNames \\=([^]*)","\`([^\`]*)\`"] ], – Hansom

@Hansom it's a good idea to use the semi-colon, or some identifier to end the regex match. The pattern you shared — ([^]*) — will basically match anything so it will match until the end of the file. That might slow down your IDE as your project grows. – Aggressive

Thanks, that's a nice tip, I didn't any slowness since my codebase was small, but absolutely it will start slowing on bigger codebases. – Hansom

This one worked for me... I modified the regex like this ["classNames=([^;]*);", "[\"'`]([^\"'`]*).*?[\"'`]"] – Psychoneurosis

@GrayGalaxy that's a nice short-hand! It will work in most cases. I just want to point out the regex will break if you're using tailwind styles that include quotes. That's because the regex match ends on the quotation mark within the style name (not the end of all styles). Here's a Regexr to illustrate: regexr.com/7o6s9 – Aggressive

Thanks @ztrat4dkyle! I updated this slightly to work with typescript e.g. declarations that include a type like const fooClasses: Bar = {first: 'pt-2'}. Just replace Classes \\ with Classes.*\\ – Contribute

Answer 2

None of the answer worked for me. But it workes based on the guide from https://www.jussivirtanen.fi/writing/using-tailwind-intellisense-within-strings

If you're using VS Code and writing your Tailwind classes within a variable, you've probably noticed that Tailwind IntelliSense doesn't work. However, if you're using a consistent naming scheme, you can fix this issue.

I use a consistent naming scheme with the word Styles at the end. In this case, I can go to Tailwind IntelliSense settings and add .*Styles to the tailwindCSS.classAttributes array:

// settings.json within VS Code
{
  // Add ".*Styles" (or whatever matches your naming scheme)
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles"]
}

example usage

  const contentStyles = "py-1 bg-white dark:bg-gray-700"

Kidderminster

One small alteration that I found useful: add a .* at end of your custom item. For me, this looks like this: "tailwindCSS.classAttributes": [..., ".*Class.*", ".*Classes.*"]. That has allowed me to get intellisense in a variety of names in my components such as somethingClasses = { ... }, somethingClassesProp = { ...} , etc. – Reaganreagen

Answer 3

Here's how I solved it.

In VSCode settings.json add the following:

 "tailwindCSS.experimental.classRegex": [
    "cntl`([^`]*)", // cntl`...`
 ],

Doglike

Thanks! That works great with classnames too. I just have to remove the ` – Shoon

Answer 4

This will detect a container consisting of className = [] string and its variants such as ButtonClassNamesXyz Classname and whatever is inside [ ] will be processed.

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

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

v2 note

• I have added detection for ] inside the actual classname string.

tailwindlabs / tailwindcss : [IntelliSense] Custom class name completion contexts #7554

    ["\\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", "'([^']*)'"],

Columbous

Answer 5

Linting is not supported yet as per: https://github.com/tailwindlabs/tailwindcss/issues/7553. Hover seem to be supported now though

For clsx

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

For classnames

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

Unconformity

I find that using the regex you have for classnames will fail to suggest classes until the first occurrence of whitespace in the string. This seems to be because the regex also matches the first quote character, and Tailwind thinks the quote is part of a class, and won't show any suggestions since none start with a quote. This regex avoids that: classnames\\(.([^)]*).\\) (this uses . for any char, but could be made stricter by only matching ", ' and ` itself) – Bevbevan

Feel free to edit the answer if you tried them out! @MagnusBull – Unconformity

Answer 6

I understand this question has been answered, but I was still facing some trouble because I wanted to use Tailwind's intellisense with react's classnames library.

Here's what worked for me after adding it to VSC's settings.json:

"tailwindCSS.experimental.classRegex": ["classNames\\(([^)]*)\\)"],

Ponceau

Answer 7

For those who want to enable tailwind IntelliSense for react props or other HTML attributes, add the following to the user settings.json.

{
"tailwindCSS.classAttributes": ["class", "className", "ngClass", "extra", "someOtherAttribute"]
}

Neomineomycin

Answer 8

I know it has nothing to do with it, but I'll leave this answer here for anyone who needs it because I couldn't find it anywhere and I managed to do it! This configuration works for both classList and className in pure javascript! Just put in the user's settings.json file in VSCode (Ctrl + Shift + P and search User Settings)

    "tailwindCSS.includeLanguages": {
        "javascript": "javascript"
    },
    "tailwindCSS.experimental.classRegex": [

        ["classList\\.add\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.contains\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.entries\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.forEach\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.item\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.keys\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.length\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.remove\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.replace\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.supports\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.toggle\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.value\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["classList\\.values\\(([^)]*)", "['\"`]([^'\"`\\s]*)['\"`]"],
        ["className\\s*=\\s*['\"`]([^'\"`]*)['\"`]"]
    ],
    "editor.quickSuggestions": {
        "strings": true
    },
    "editor.inlineSuggest.enabled": true

It works for all classList methods and also works with the className, you can use ", ' or ` which will work!

Dukey

I bet you could just do (add|contains|entries|forEach|item|...) or even clasList\.[a-zA-Z]+\(. – Columbous

I tried, but it didn't work! It was my first attempt to get there! – Dukey