同样的情况也发生在我身上，这里有一个简单的解决方案，我发现：

顶级域名：

要使用 D3.js 将Tailwind CSS类应用于SVG元素，
可以在 D3.js 中使用.classed()方法
而不是使用.attr()方法。

详细答案：

.classed()方法将类添加到所选的 D3.js 元素。
不知何故，顺风的终端命令似乎读得很好，
在我的情况是：

npx tailwindcss -i ./input.css -o ./dist/output.css --watch

字符串
像你一样使用 Vite 作为捆绑器，以及普通JavaScript（香草）。
至于我的tailwindcss配置，如下所示：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

型
正如您所看到的，我让.content对象也读取目录中的JavaScript文件。
（使用"./*.{html,js}"正则表达式）
但我从您的问题中了解到，问题并不存在......我只是向阅读本文的未来开发人员指出，这可能会有所帮助
下面是一个示例代码段，演示如何使用.classed()方法将Tailwind CSS类应用于SVG矩形元素：

d3.select('svg')
  .append("rect")
  .classed('fill-red-500', true) // here the "class" working in tailwind
  .attr("x", 10)
  .attr("y", 10)
  .attr("height", 50)
  .attr("width", 50)

console.clear() // just for the snippet, you don't need it

<!-- don't use this script in production, this is only for stackoverflow snippet.... use npm instead -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js" integrity="sha512-oKI0pS1ut+mxQZdqnD3w9fqArLyILRsT3Dx0B+8RVEXzEk3aNK3J3pWlaGJ8MtTs1oiwyXDAH6hG6jy1sY0YqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<svg height="300" width="300"></svg>

的字符串
正如您在前面的代码片段中所看到的，这个方法.classed('fill-red-500', true)需要两个参数：
1.带有tailwind类名称的字符串（类似于您已经熟悉的.attr()）

• 一个布尔值
• 如果传递true，则该类将应用于svg元素

(for让你的想法：就像在香草JS中使用.classList.add()一样）

• 如果传递false，则该类不会应用于svg元素

(for让你的想法：就像在香草JS中使用.classList.remove()一样）
是不是很酷？
如果您对d3 j有一些经验，
您肯定知道使用callback functions是很常见，
就像这个() => {}
如果您对SVG元素使用.data(dataset).enter()方法（您应该这样做以获得D3 js的优点），
那么你也可以使用(d) => {}，这样你就可以做一些计算，然后返回一些
(in在这种情况下，可以是true或false...如果您返回字符串或数字之类的其他内容，据我所知JavaScript的行为往往类似于返回true，除非是空字符串""或null或undefined）
data()方法用于将数据附加到这些元素。dataset数组作为参数传递给该方法。
下面是一个示例，您也可以使用函数根据某些条件动态设置类：

.classed('fill-green-500', (num) => num > 50) // if num is greater than 50 then add green
  .classed('fill-red-500', (num) => num <= 50); // if num is less or equal to 50 then add the class red.

型

IDE智能感知

• 智能感知又如何呢？*

默认情况下不会显示弹出的建议。
因此，我试着在顺风GitHub页面上为你打开一个问题...
最后一切皆有可能：），我为你找到了一个解决方案！

• 那是什么 *

您需要更改顺风配置，方法是按照其中一位Maven在另一期文章中所写的注解进行操作：配置tailwindCSS.experimental.classRegex选项。

• 如何在我VSCODE中找到此选项？*
• 您只需要首先打开IDE中的任何文件（文件类型无关紧要）
• CTRL+SHIFT+P组合键

x1c 0d1x的数据
如您所见，它将打开一个快捷方式列表

• 搜索"setting"，然后输入
• 您将在顶部看到一个带有搜索栏的界面。

类型"TailwindCSS"

的

• 在下面的列表中滚动，直到找到文本为TailwindCSS > Experimental: Class Regex的项目。

的

• 现在，您可以按照此处的说明配置tailwindCSS.experimental.classRegex选项，在括号内添加正则表达式。

下面是为您创建的配置：

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

型
如你在这里看到的，是一个正则表达式数组。
IDE上的结果：

的