vscode 顺风 css 智能感知不工作

Question

我有个问题。 我正在学习 laravel 8 和 tailwind CSS。作为标题 vscode tailwind CSS Intellisense 不工作。 我的 tailwind CSS 版本是 2.2.15。 tailwind.config.js 就像照片一样。 在这里输入图片描述output 没有错误在这里输入图片描述

那么我该怎么办呢？

Answer 1

可能的解决方案

禁用名为“Bootstrap 4、Font Awesome 4、Font Awesome 5 Free & Pro 代码段”的单个 VS Code 扩展

证据

Tailwind CSS IntelliSense 在我的 Angular 项目中不起作用。 我已经按照他们的说明安装了 Tailwind CSS：

点击 这里

我的版本

• VS 代码：1.62.3
• 顺风 CSS：3.0.1
• 角度：13.0.3

我禁用了扩展程序，上面提到了我的“可能的解决方案”，Tailwind CSS IntelliSense 立即工作。

Tailwinds CSS IntelliSense 在我的 Angular 项目中的演示

Answer 2

Tailwind CSS IntelliSense 扩展在您的工作区中有配置文件之前无法工作，正如其描述中明确指出的那样！

即使您只是使用 CDN 也可以，但是您必须在项目的根目录中创建一个tailwind.config.js文件，其中至少包含默认值：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

此外，由于您使用的是 Laravel，我猜您需要通过此 VSC 设置（在settings.json ）添加 Blade 文件以被扩展识别：

"tailwindCSS.includeLanguages": {
    "blade": "html",
},

Answer 3

我在使用 laravel 进行顺风工作时遇到了同样的问题。
卸载并重新安装 tailwind 智能感知扩展解决了我的问题。
另外，不要忘记在刀片文件的一部分中添加以下内容：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Answer 4

对我来说，这似乎是我的一个扩展的问题。

我需要卸载“Emmet Live”扩展并安装“Mithril Emmet”扩展。

正如其他一些答案所建议的那样，请确保您还将以下内容放入您的设置中。json：

"tailwindCSS.emmetCompletions": true,
  "editor.inlineSuggest.enabled": true,
  "editor.quickSuggestions": {
    "strings": true
  },
"css.validate": false

Answer 5

使用 '' 而不是 "" 可能会起作用。