VSCode自动补全className后选中内容干扰Tailwind CSS IntelliSense问题

• 修正编辑器补全选中行为
  打开VSCode的settings.json（快捷键Ctrl+,后点击右上角{}图标），添加以下配置，避免补全className=""后自动选中引号内的空白内容：

  "editor.suggest.insertMode": "insert",
  "emmet.preferences": {
    "html.autoClosingQuotes": "never"
  },
  "[javascriptreact]": {
    "editor.suggest.insertMode": "insert"
  },
  "[typescriptreact]": {
    "editor.suggest.insertMode": "insert"
  }
  

• 提升Tailwind补全优先级
  在settings.json中补充配置，确保Tailwind的类名补全优先触发：

  "editor.suggestSelection": "first",
  "tailwindCSS.experimental.classRegex": [
    "className=\"([^\"]*)\"",
    "className='([^']*)'",
    "className={\"([^\"]*)\"}",
    "className={'([^']*)'}"
  ]
  

• 排查扩展冲突
  暂时禁用其他CSS/HTML补全类扩展（比如HTML CSS Support、Emmet相关第三方扩展），重启VSCode后测试问题是否消失。

• 重置Tailwind扩展配置
  若上述方法无效，可尝试重置Tailwind CSS IntelliSense的配置：

  1. 打开VSCode扩展面板，找到Tailwind CSS IntelliSense
  2. 点击扩展卡片右上角的齿轮图标 → 选择「扩展设置」
  3. 点击设置页面右上角的「重置设置」按钮
  4. 重启VSCode后再次测试

内容的提问来源于stack exchange，提问作者ventoX