在VSCode中使用Tailwind CSS时，如何获取输入提示？

要获得你图中所示的Tailwind CSS输入提示，按以下步骤操作即可：

• 安装Tailwind CSS IntelliSense插件
  打开VSCode的扩展面板（快捷键Ctrl+Shift+X/Cmd+Shift+X），搜索「Tailwind CSS IntelliSense」并安装，这是官方提供的插件，专门用于提供类名补全、语法提示、颜色预览等功能。

• 确保项目包含正确的Tailwind配置文件
  项目根目录下需要存在tailwind.config.js（或tailwind.config.ts），需保证content字段正确覆盖你项目中使用Tailwind类的文件路径，示例配置：

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

  content字段的作用是让Tailwind扫描指定文件中的类名，插件才能基于这些内容提供精准提示。

• 配置VSCode支持多文件类型的提示
  打开VSCode的设置（快捷键Ctrl+,/Cmd+,），搜索「tailwindCSS.includeLanguages」，根据你使用的框架添加对应的文件类型映射，比如在settings.json中配置：

  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue": "vue"
  }
  

  这一步是让插件识别JSX、TSX、Vue等文件中的className/class属性，提供对应的类名提示。

• 重启VSCode或重新加载窗口
  安装插件和配置完成后，重启VSCode或按下Ctrl+Shift+P/Cmd+Shift+P执行「Reload Window」操作，确保插件生效。

完成以上步骤后，在输入Tailwind类名时就能看到类似图中的自动补全、语法说明、颜色预览等提示功能。

内容的提问来源于stack exchange，提问作者林廷奕