主页 / coding / 问题 / 79560191
Accepted
Harry Northover
Asked: 2025-04-07 22:50:02 +0800 CST

在 TailwindCSS 类名旁边显示颜色框，指示颜色，可以在任何位置（例如在 class 或 className 属性中）显示

  • 772

无论我在哪里写 TailwindCSS 类名，是否可以在任何与颜色相关的 TailwindCSS 类名之前显示颜色框？

我注意到这在 CSS 文件或 HTMLclass或className属性中完美运行（例如border-error-400在第二张照片中）。

我认为这应该适用于整个代码，但我很失望地发现，如所附屏幕截图所示，当将 TailwindCSS 颜色类写为 JS 对象的值时，颜色指示框不会出现。

它在任何地方都不起作用 className="..."在属性中工作
不在这里工作 在这里工作
visual-studio-code

2 个回答

  1. Best Answer

    TLDR：虽然第一个解决方案专门针对问题中的示例，但我建议您考虑一种更一致的方法：创建一个始终只传递 TailwindCSS 类的函数。然后，告知 IntelliSense 名为 xy 的函数将只接受 TailwindCSS 类，以便它进行相应的处理。更多信息请参阅：解决方案 #3。

    好吧，我检查了我的建议，是的；TailwindCSS IntelliSense 根据正确的正则表达式模式完全应用了其所有功能。

    注意：正确验证我的答案的先决条件是安装 TailwindCSS IntelliSense。


    针对普通 JavaScript 对象的解决方案 #1

    这给出了正确的答案，尽管我认为这不是最好的方法。使用正则表达式，我们可以声明 JS 对象的语法，以便它尝试在所有作为值的字符串中搜索 TailwindCSS 类名，并将 TailwindCSS 类名作为提示。

    TailwindCSS IntelliSense 具有以下设置：

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

    注意：要打开设置，请按CtrlP并输入Preferences: Open User Settings (JSON)。

    重要提示：缺点是，它对所有对象都有效。我认为这可能会浪费精力，并使流程变得不必要地复杂化。

    例子


    针对普通 JavaScript 变量的解决方案 #2

    与对象类似，正则表达式也可以用于变量。

    TailwindCSS IntelliSense 具有以下设置：

    {
  "tailwindCSS.experimental.classRegex": [
    "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]",
  ],
}

    注意：要打开设置，请按CtrlP并输入Preferences: Open User Settings (JSON)。

    重要提示：再次强调，缺点是它对所有字符串都有效。我认为这可能会浪费精力，并使流程变得不必要地复杂化。

    例子


    解决方案 #3 具有特殊功能（推荐）

    该函数的优点在于，无论您在哪里想要使用 TailwindCSS 类，只需调用它，它就会立即起作用，而以前的解决方案只能在 JS 对象中可用。

    我建议不要依赖正则表达式，而是创建一个“假”函数，该函数接受一个字符串作为参数，并直接返回该参数作为结果。这样，你可以明确地告诉 TailwindCSS IntelliSense，传递给此函数的参数肯定包含 TailwindCSS 类名，这样它以后在任何地方都能正确且一致地工作。

    function tw (input: TemplateStringsArray | string, ...interpolations: any[]): string {
  if (typeof input === "string") {
    return input;
  }

  let result = input[0];
  for (let i = 0; i < interpolations.length; i++) {
    result += interpolations[i] + input[i + 1];
  }
  return result;
}

    tw通过以下设置，TailwindCSS IntelliSense 将正确处理该函数的参数：

    {
  "tailwindCSS.classFunctions": [
    "tw",
  ],
}

    注意：要打开设置，请按CtrlP并输入Preferences: Open User Settings (JSON)。

    注意：该tw函数无需过于复杂。我只是让它接受三种基本类型的字符串输入。这三种调用方式都会返回一个连接后的字符串。例如，在 中example_4，结果将是"bg-red-500 text-green-400"。

    例子

    • 1

  2. 颜色框仅显示在 className 中。当然，您可以通过安装“Color Highlight”扩展并将颜色转换为十六进制来实现。例如，不要写“bg-red-600”，而要写“#e7000b”。

    • -1

相关问题