Tailwind CSS IntelliSense 没有在 ReactJS 项目中提供建议？

Question

我使用create-react-project命令创建了一个 ReactJS 项目。我 npm 安装了tailwindcss并创建了一个tailwind.config.js文件。

现在为了让我的生活更轻松，我还安装了一个名为 Tailwind CSS IntelliSense 的扩展并重新加载了 VSCode。该扩展程序仍然没有在我的 JavaScript 文件中提供建议。

起初，我认为这可能是因为它仅适用于 html 扩展，或者 reactjs 文件className用于添加 CSS 类，因为 class 关键字被保留。因此，我尝试编辑index.html文件，但也尝试编辑HTML 文件中的建议。

请告诉我还可以试用什么？

Answer 1

编辑你的settings.json如下：

{
  // other settings
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },
  "editor.quickSuggestions": {
    "strings": true
  }
}

Answer 2

即使在配置设置后我也遇到了这个问题tailwindCSS.includeLanguages。

因此，请确保您还配置了以下设置，以允许在字符串中添加建议。

"editor.quickSuggestions": {
    "strings": true
}

Answer 3

以下是让 Tailwind Intellisense 使用 React 文件的方法

1. 转到 Tailwind CSS 设置并添加 Javascript 支持 "tailwindCSS.includeLanguages": { "plaintext": "javascript" }
2. 重新加载 vscode

如果这不能解决问题，请ctrl + space在添加类名之前尝试使用。

查看 Tailwind 设置的图片

Answer 4

将其添加到 settings.json 文件的末尾，以便在 HTML 和 js 文件上获取 IntelliSense

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },

Answer 5

添加到settings.json

您可以通过以下方式打开

cmd + shift + p => 首选项：打开设置 (JSON)

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "javascriptreact": "javascriptreact",
    "typescript": "typescript",
    "typescriptreact": "typescriptreact",
}