VScode Tailwind CSS Intellisense 插件仅在我在类名前添加空格时才起作用

Question

我遵循了nextjs 的tailwind 安装指南

下面是我的tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

但智能感知仅在我的类名以空格开头时才起作用。

下面是我的 vscode settings.json 文件。我认为可能有什么东西导致了这个错误，但是注释掉整个文件并不能解决问题。

{
  "color-highlight.markerType": "dot-before",
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "autoprefixer.formatOnSave": true,
  "autoprefixer.browsers": [
    "last 4 versions",
    "ie >= 9",
    "> 5%"
  ],
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "liveServer.settings.donotVerifyTags": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "scss.format.newlineBetweenRules": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "workbench.settings.openDefaultKeybindings": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "window.zoomLevel": 1,
}

Answer 1

我不久前确实遇到过这个问题（tailwindcss-intellisense #495）。这是由于 VS Code 处理字符串上下文的方式所致。直到现在，这对我来说仍然是一次偶然，但我可以忍受。话虽如此，将以下内容添加到您的文件中.vscode/settings.json应该可以解决问题。

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