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

user_15347746 0
Viewed 2924

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
`

visual-studio-code intellisense javascript
2 Answers

Here's how I solved it.

In VSCode settings.json add the following:

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

user_153477460

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

user_65864070
Related