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 文件中也没有建议。

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

- jatin grover

---

我也遇到了同样的问题，你是如何解决的？ - Harel

Answer 1

按照以下方式编辑您的settings.json：

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

- chankruze

Answer 2

以下是如何使Tailwind Intellisense与React文件一起工作的方法

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

如果这不起作用，请尝试在添加类名之前使用ctrl + space.

查看Tailwind设置图片

- Tim Kelly

---

使用 cmd + shift + p 快捷键可以在 VSCode 中打开 JSON 设置。然后您可以将建议的代码添加到那里。 - thedanotto

它只有在我按下 ctrl + space 时才能正常工作，但现在我想知道为什么它不能正常工作。 - youssef jallouli

Answer 3

即使我配置了 tailwindCSS.includeLanguages 设置，我仍然遇到了这个问题。

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

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

- Ganesh

---

我在VS Code中一直遇到Tailwind Intellisense的问题。我使用了chancruze上面的答案和这个答案，将quickSuggestions设置为true来开启字符串。现在它完美地运行了。 - undefined

Answer 4

在setting.json文件末尾添加以下内容，以便在HTML和js文件上获得智能感知

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

- Ashik

Answer 5

添加到 settings.json

您可以通过以下方式打开

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

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

- Selcukusu

---

typescript 这部分对我来说起了作用。 - undefined

Answer 6

尝试删除 "tailwind.config.js" 文件，然后使用以下命令重新创建它：

npx tailwindcss init

它应该开始工作。

- Otto Gutierrez

Answer 7

我曾经遇到过同样的问题。我卸载了Tailwind CSS IntelliSense，然后重新安装它，问题就解决了。

- Moses Yashua

Answer 8

在您的tailwind.config.js文件中，必须包含要使用Tailwind CSS的文件。 您可以替换：

content: [],

使用

content: ["*"],

它将包含项目中的所有文件。保存后，Tailwind CSS IntelliSense 将弹出建议。

- Haroon Mirza

Answer 9

两者结合对我有用。

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

请尝试删除"tailwind.config.js"文件，然后重新创建：

npx tailwindcss init

- saraf fath

Answer 10

我添加了这些代码行，但它没有起作用。然而，将我的VSCode更新到最新版本对我有帮助。

    "tailwindCSS.includeLanguages": { "plaintext": "javascript" },
    "tailwindCSS.emmetCompletions": true,
    "editor.inlineSuggest.enabled": true,
    "editor.quickSuggestions": {
        "strings": true
    },
    "css.validate": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

- francis nwachukwu