如何让VSCode自动补全中TailwindCSS类优先于函数显示

以最常用的VS Code为例，你可以通过以下配置实现：

1. 确保已经安装Tailwind CSS IntelliSense插件，这是实现精准补全的基础。
2. 打开VS Code的设置文件（快捷键Ctrl+, / Cmd+，然后点击右上角的{}图标进入JSON编辑模式），添加或修改以下配置：

   // 让代码片段补全排在底部
   "editor.snippetSuggestions": "bottom",
   // 设置补全建议默认选中第一个
   "editor.suggestSelection": "first",
   // 确保Tailwind插件能识别React项目中的className属性
   "tailwindCSS.experimental.classRegex": [
     "className=\"([^\"]*)\"",
     "className='([^']*)'",
     "className={`([^`]*)`}"
   ],
   // 让插件支持React相关语言
   "tailwindCSS.includeLanguages": {
     "javascriptreact": "javascriptreact",
     "typescriptreact": "typescriptreact"
   },
   // 启用Tailwind的补全建议
   "tailwindCSS.suggestions": true
   

配置完成后，在React组件的className中输入字符时，Tailwind的类会优先出现在补全列表顶部。

如果使用WebStorm等其他编辑器：

• 安装官方的Tailwind CSS插件，进入设置面板找到Editor > General > Code Completion，调整补全项的优先级，将Tailwind相关的补全设置为最高优先级即可。

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