CODEWITHSUNDEEP
javascriptvisual-studio-codeintellisense
fruxo
fruxo

Reputation: 765

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

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
`

Upvotes: 51

Views: 28402

Answers (11)

Pooya
Pooya

Reputation: 81

cva docs

As I was stuck on this problem, I write it here maybe it helps someone.

If you are using a profile in your VS Code, you should add it in your current profile setting.json.

To open current profile setting.json use the VS Code command (open command with F1):

>preferences:open User Settings (JSON)

then type in this:

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

Upvotes: 1

Lucas Amaral
Lucas Amaral

Reputation: 61

Go to your tailwind css extension on vscode and you'll find this

enter image description here

then add a name you want and restart vscode.

Upvotes: 0

Nipatiitti
Nipatiitti

Reputation: 400

This question is quite old and by now even the most liked answer is old, but this still comes up first on google search.

@ztrat4dkyle answer relies on your formatting using semis and doesn't allow for typescript types between the name and = {}.

After looking at the implementation in the tailwind plugin

I came up with the following regex:

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

You can replace Classes to what ever identifier you are using. The first array element matches Classes: type (or not) = {} (and supports nested objects). The next line matches basic strings Classe = "" (supports ", ' and `)

Here is an example of what that might look like in a svelte file

enter image description here

Upvotes: 1

Qwerty
Qwerty

Reputation: 31997

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

image

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

enter image description here

enter image description here 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", "'([^']*)'"],

Upvotes: 2

faelBrunnoS
faelBrunnoS

Reputation: 43

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!

Upvotes: 0

Pratheek Senevirathne
Pratheek Senevirathne

Reputation: 111

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"]
}

Upvotes: 1

Seyid Takele
Seyid Takele

Reputation: 1228

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"

Upvotes: 36

Yoyo
Yoyo

Reputation: 1

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

Upvotes: 0

Gabriel Petersson
Gabriel Petersson

Reputation: 10482

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

Upvotes: 3

ztrat4dkyle
ztrat4dkyle

Reputation: 2187

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

Upvotes: 48

fruxo
fruxo

Reputation: 765

Here's how I solved it.

In VSCode settings.json add the following:

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

Upvotes: 20

Related Questions