How can I enable TailwindCSS 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
`

You can see more examples here: github.com/tailwindlabs/tailwindcss-intellisense/issues/129 — Paul Melero
– Paul Melero, Commented May 14, 2021 at 4:32
By using the latest version of TailwindCSS IntelliSense, you can easily do this. See the classFunctions in my answer. — rozsazoltan
– rozsazoltan, Commented Apr 8 at 8:29

ztrat4dkyle · Accepted Answer · 2022-09-08 21:12:09Z

59

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

answered Sep 8, 2022 at 21:12

ztrat4dkyle

2,3072 gold badges20 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

M.Ubeyd Over a year ago

great, even you can get rid of the semi if you're not using it,

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

ztrat4dkyle Over a year ago

@M.Ubeyd 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.

M.Ubeyd Over a year ago

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.

oviirup Over a year ago

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

jackhkm Over a year ago

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.*\\

|

Seyid Takele · Accepted Answer · 2023-02-03 12:40:51Z

41

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"

edited Feb 3, 2023 at 12:40

answered Jan 29, 2023 at 9:17

Seyid Takele

1,2863 gold badges16 silver badges29 bronze badges

4 Comments

Jason Frank Over a year ago

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.

Henry Ozoani Over a year ago

This worked for me "tailwindCSS.classAttributes": ["class", "className", "ngClass", ".*Styles.*"] . Suggestions show for any variable that has Styles in its name.

Jérémy Melchor Feb 4 at 9:54

Don't forget to restart VS Code for the changes to be applied

rozsazoltan Apr 8 at 8:30

By using the latest version of TailwindCSS IntelliSense, you can easily do this. See the classFunctions in my answer. For me, it works without restarting.

Tanay · Accepted Answer · 2022-04-18 13:16:56Z

20

Here's how I solved it.

In VSCode settings.json add the following:

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

edited Apr 18, 2022 at 13:16

Tanay

8991 gold badge8 silver badges13 bronze badges

answered Mar 13, 2021 at 15:06

fruxo

8551 gold badge7 silver badges9 bronze badges

2 Comments

Marco Antônio Over a year ago

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

rozsazoltan Apr 8 at 8:30

By using the latest version of TailwindCSS IntelliSense, you can easily do this. See the classFunctions in my answer.

Gabriel Petersson · Accepted Answer · 2022-11-07 15:11:08Z

4

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

edited Nov 7, 2022 at 15:11

answered Nov 7, 2022 at 14:47

Gabriel Petersson

10.7k4 gold badges41 silver badges50 bronze badges

2 Comments

Magnus Bull Over a year ago

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)

Gabriel Petersson Over a year ago

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

rozsazoltan · Accepted Answer · 2025-04-08 08:34:15Z

4

As others mentioned, for displaying hints when passing parameters in functions, up until v0.14.9, could only reference them using regex by classRegex. However, from v0.14.10 onward, this was extended with a simpler classFunctions setting.

From TailwindCSS IntelliSense v0.14.10

{
  "tailwindCSS.classFunctions": ["cntl"]
}

Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes - StackOverflow

edited Apr 8 at 8:34

answered Apr 8 at 8:28

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Comments

Qwerty · Accepted Answer · 2023-05-25 19:12:52Z

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

Pratheek Senevirathne · Accepted Answer · 2023-03-05 17:05:16Z

1

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

answered Mar 5, 2023 at 17:05

Pratheek Senevirathne

1214 bronze badges

Comments

Nipatiitti · Accepted Answer · 2024-08-08 09:41:59Z

1

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

answered Aug 8, 2024 at 9:41

Nipatiitti

4002 silver badges13 bronze badges

2 Comments

MHebes Jan 8 at 18:21

This was the most helpful regex to me. I combined it with the tw identity function for template literals as suggested by prettier-plugin-tailwindcss and added (?:tw)? immediately before both [\"'`] in the two class regexes. This has given me sorting and intellisense in variables by defining them like const baseClasses = tw`text-red-200 bg-white`;.

ADTC Feb 10 at 13:59

Worth noting that after adding the regex setting, I had to do "Developer: Reload Window" in VS Code a couple of times to get it working.

marc_s · Accepted Answer · 2025-02-06 08:39:56Z

1

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

edited Feb 6 at 8:39

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 6 at 9:57

Pooya

814 bronze badges

1 Comment

ADTC Feb 10 at 13:59

Worth noting that after adding the regex setting, I had to do "Developer: Reload Window" in VS Code a couple of times to get it working.

Yoyo · Accepted Answer · 2023-01-03 10:32:05Z

0

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

answered Jan 3, 2023 at 10:32

Yoyo

1

Comments

faelBrunnoS · Accepted Answer · 2023-03-19 23:05:08Z

0

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!

answered Mar 19, 2023 at 23:05

faelBrunnoS

437 bronze badges

2 Comments

Qwerty Over a year ago

faelBrunnoS Over a year ago

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

Lucas Amaral · Accepted Answer · 2025-01-11 02:03:36Z

0

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

then add a name you want and restart vscode.

answered Jan 11 at 2:03

Lucas Amaral

616 bronze badges

1 Comment

ADTC Feb 10 at 13:45

The names are dynamic. It won't make sense to put them in a static list.

Collectives™ on Stack Overflow

How can I enable TailwindCSS IntelliSense outside of "className"?

12 Answers 12

8 Comments

4 Comments

2 Comments

2 Comments

From TailwindCSS IntelliSense v0.14.10

Comments

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

8 Comments

4 Comments

2 Comments

2 Comments

From TailwindCSS IntelliSense v0.14.10

Comments

Comments

Comments

2 Comments

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related