使用 Next.js 和 vscode 时，Tailwinds Intellisense 不起作用；

Question

Github 问题链接： 点击这里
在此链接您可以获得复制链接；

一些信息：

使用Tailwindcss-intellisense版本：0.7.6；

使用Tailwindcss版本：3.0.16

包管理器：NPM；

操作系统：Pop_os（Linux）；

---

在 Tailwind 的最新更新之后，当我尝试将

className

添加到元素时，我没有收到任何建议，我尝试更新 tailwinds 文件，更改项目，回滚到以前的项目以及在任何在这些情况下，自动完成功能似乎不起作用。

ctrl + space

返回“无建议”；

这是智能感知的输出：

尝试回滚某些版本的顺风智能感知，也不起作用。 我尝试过的版本： (0.7.6, 0.7.5, 0.7.4, 0.7.3)

我的设置.json：

{
    "vsicons.dontShowNewVersionMessage": false,
    "css.validate": false, // Disable css built-in lint
    "stylelint.enable": true, // Enable sytlelint
    "scss.validate": false, // Disable scss lint (optional if using scss)
    
    "tailwindCSS.includeLanguages": {
        "plaintext": "javascript"
    },
      
    "editor.suggestSelection": "first",
    "diffEditor.ignoreTrimWhitespace": true,
    "git.autofetch": true,
    "editor.fontSize": 14,
    "editor.fontFamily": "Fira Code, regular, monospace",
    "editor.fontLigatures": true,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[handlebars]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.colorCustomizations": {
        "statusBar.background": "#7d58c2",
        "statusBar.noFolderBackground": "#492985",
        "statusBar.debuggingBackground": "#5900ff"
    },
    "liveServer.settings.donotVerifyTags": true,
    "editor.inlineSuggest.enabled": true,
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "phase",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "editor.smoothScrolling": true,
    "files.autoSave": "onFocusChange",
    "github.copilot.enable": {
        "*": true,
        "yaml": false,
        "plaintext": false,
        "markdown": true
    },
    "git.ignoreRebaseWarning": true,
    "workbench.iconTheme": "vscode-icons",
    "keyboard.layout": "br",
    "editor.quickSuggestions": {
        "strings": true
    },
    "workbench.colorTheme": "Horizon Contrast (rainglow)",
    "editor.minimap.enabled": false,
    "tailwindCSS.classAttributes": [
        "class",
        "className"
    ],
    "tailwindCSS.emmetCompletions": true,
}

Answer 1

解决了！

问题是我的文件夹系统；

这是我的项目文件夹的根目录： Snowsr/home/[新]工作区/Web/

通过从文件夹名称中删除 [new] 解决了问题。

仍然不知道为什么，但这与顺风智能感知相冲突，而智能感知确实没有告诉我这一点。

Answer 2

在此处查看解决方案： https://plainenglish.io/blog/how-to-fix-tailwind-css-intellisense-in-visual-studio-code-3dede794df21

简单来说，您需要安装 Tailwind IntelliSense VScode 扩展，然后将以下行添加到您的 vscode Settings.json 中。从命令面板中搜索 settings.json：

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