如何在“className”之外启用 tailwind intelliSense？

Question

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

我正在使用一个名为 cntl https://www.npmjs.com/package/cntl的 package 来帮助编写更多可维护的类名，但是，使用这个 package，我失去了智能感知支持。

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

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

Answer 1

这是我解决它的方法。

在 vscode settings.json 添加如下

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

Answer 2

根据： https://github.com/tailwindlabs/tailwindcss/issues/7553 ://github.com/tailwindlabs/tailwindcss/issues/7553，尚不支持 Linting。 现在似乎支持悬停

对于clsx

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

对于classnames

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

Answer 3

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

这是我的 VS 代码settings.json 。json 在名称以“类”结尾的对象和变量中添加 Tailwind IntelliSense ：

  "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 4

这将检测由className = [] string 及其变体组成的容器，例如ButtonClassNamesXyz Classname以及[ ]内的任何内容都将被处理。

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

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

v2 笔记

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

tailwindlabs / tailwindcss：[IntelliSense] 自定义类名完成上下文 #7554

Answer 5

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

这是将它添加到 VSC 的设置后对我有用的东西。json：

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

Answer 6

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

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

我使用一致的命名方案，最后是单词 Styles。 在这种情况下，我可以将 go 设置为 Tailwind IntelliSense 并将 .*Styles 添加到 tailwindCSS.classAttributes 数组：

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