如何在VS Code的HTML文件中获取Tailwind CSS代码提示？

1. 先把Tailwind CSS在项目里搭好 #

如果项目还没初始化Tailwind，按下面步骤操作：

• 根目录执行npm init -y生成package.json（没有的话）
• 安装依赖：npm install -D tailwindcss postcss autoprefixer
• 生成配置文件：npx tailwindcss init -p

2. 配置tailwind.config.js的扫描路径 #

打开自动生成的tailwind.config.js，把HTML文件的路径加到content数组里，确保Tailwind能扫描到你的HTML文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./**/*.html", // 匹配所有子目录下的HTML文件
    "./**/*.js"    // 可选：JS文件里用到Tailwind类名的话也加上
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 在CSS文件里引入Tailwind指令 #

新建或修改主CSS文件（比如styles.css），添加以下三行指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 检查VS Code插件设置（按需调整） #

如果还是没提示，打开VS Code设置（快捷键Ctrl+,），搜索Tailwind CSS IntelliSense，确认以下设置：

• 勾选Tailwind CSS: Enable确保插件处于开启状态
• 检查Tailwind CSS: Include Languages里包含html，默认一般已配置，没有的话手动添加：

  "tailwindCSS.includeLanguages": {
    "html": "html"
  }
  

• 开启Tailwind CSS: Validate，可以帮你检查类名是否正确

5. 重启VS Code #

完成以上配置后，重启VS Code，插件就能在HTML标签的class属性里正常给出Tailwind类名的代码提示了。

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