如何在“className”之外启用顺风智能感知？

Question

我正在使用 tailwind CSS intellisense vscode 扩展，它似乎只在在 className 属性中输入时才起作用。

我正在使用一个名为 cntl 的包https://www.npmjs.com/package/cntl 来帮助编写更易于维护的类名，但是，使用这个包，我失去了 intelliSense 支持。

有什么方法可以手动配置，以便我在编写 cntl 时获得智能感知？

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

Answer 1

我意识到这个问题很旧，但它仍然出现在搜索中，所以我想分享我的工作流程:)

这是我的 VS Code

settings.json

，用于在对象和变量中添加 Tailwind IntelliSense ，其名称以“Classes”结尾：

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

Tailwind IntelliSense 现在将识别以下所有字符串：

const defaultClasses = `text-grey`;

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

注意：正则表达式匹配以

Classes =

开头并以

;

结尾的代码块 — 您可以将

Classes =

替换为您自己的匹配器，例如。

cntl

:)

Answer 2

没有一个答案对我有用。 但它的工作原理是基于 https://www.jussivirtanen.fi/writing/using-tailwind-intellisense-within-strings

的指南

如果您使用 VS Code 并在变量中编写 Tailwind 类，您可能已经注意到 Tailwind IntelliSense 不起作用。但是，如果您使用一致的命名方案，则可以解决此问题。

我使用一致的命名方案，末尾带有“Styles”一词。在这种情况下，我可以转到 Tailwind IntelliSense 设置并将 .*Styles 添加到 tailwindCSS.classAttributes 数组中：

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

用法示例

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

Answer 3

我是这样解决的。

在 VSCode

settings.json

添加以下内容：

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

Answer 4

这将检测由

className = []

字符串及其变体（例如

ButtonClassNamesXyz

Classname

）组成的容器，并且

[ ]

内的任何内容都将被处理。

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

在此调整正则表达式https://www.debuggex.com/r/yhCYrsFdzXRWQEhP

v2 注释

• 我在实际的类名字符串中添加了对

  ]

  的检测。

尾风实验室 / 顺风CSS : [IntelliSense] 自定义类名补全上下文 #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", "'([^']*)'"],

Answer 5

尚不支持 Linting，如下所示：

https://github.com/tailwindlabs/tailwindcss/issues/7553

。不过现在似乎支持悬停

对于

clsx

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

对于

classnames

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

Answer 6

我知道这个问题已经得到解答，但我仍然面临一些麻烦，因为我想将 Tailwind 的智能感知与 React 的类名库一起使用。

将其添加到 VSC 的 settings.json 后，这对我有用：

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

Answer 7

对于那些想要为 React props 或其他 HTML 属性启用 tailwind IntelliSense 的人，请将以下内容添加到用户 settings.json 中。

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

Answer 8

我知道这与它无关，但我会将这个答案留在这里给任何需要它的人，因为我在任何地方都找不到它，但我设法做到了！ 此配置适用于纯 JavaScript 中的 classList 和 className！ 只需在 VSCode 中放入用户的 settings.json 文件（Ctrl + Shift + P 并搜索 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

它适用于所有 classList 方法，也适用于 className，您可以使用 "、' 或 ` 即可！

Answer 9

这个问题已经很老了，现在即使是最喜欢的答案也已经很旧了，但这仍然是谷歌搜索中首先出现的问题。

@ztrat4dkyle 答案依赖于您使用半格式的格式，并且不允许在名称和 = {} 之间使用打字稿类型。

查看了tailwind插件中的实现之后

我想出了以下正则表达式：

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

您可以将类替换为您正在使用的任何标识符。第一个数组元素匹配

Classes: type (or not) = {}

（并支持嵌套对象）。下一行匹配基本字符串

Classe = ""

（支持“、'和`）

这是一个在精简文件中可能是什么样子的示例