Tailwind CSS IntelliSense 不在 ReactJS 项目中提供建议？答案

【问题标题】：Tailwind CSS IntelliSense does not provide suggestions in a ReactJS project?Tailwind CSS IntelliSense 不在 ReactJS 项目中提供建议？
【发布时间】：2020-11-21 04:40:17
【问题描述】：

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

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

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

请告诉我还能尝试什么？

【问题讨论】：

我也遇到了同样的问题，请问您是怎么解决的？

标签： reactjs visual-studio-code tailwind-css

【解决方案1】：

以下是如何让 Tailwind Intellisense 处理 React 文件

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

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

View image of Tailwind settings

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如下编辑您的settings.json：

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

【讨论】：

【解决方案4】：

在你的 setting.json 文件末尾添加这个，以便在 HTML 和 js 文件上获得 IntelliSense

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

【讨论】：

【解决方案5】：

尝试删除“tailwind.config.js”并重新创建它

npx tailwindcss init

它应该开始工作了。

【讨论】：

【解决方案6】：

您应该在您的 vscode 设置中配置 tailwindCSS.includeLanguages 设置，如下所示：

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

【讨论】：

【解决方案7】：

两者结合对我有用。

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

和

尝试删除“tailwind.config.js”并重新创建它

npx tailwindcss init

【讨论】：