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

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