在 vscode 中使用 tailwindcss 时候，会遇到插件不工作，无法自动补全，也无法展示类名的颜色。有如下几种排查方法

可以按下面的顺序排查问题。

1. 查看插件的日志输出

Ctrl + Shift + P，搜索 tailwind css show output。查看日志是否报错。比如没有安装依赖。 例如日志中出现无法解析依赖 Tailwind CSS: Can’t resolve ‘@headlessui/tailwindcss’，这种情况安装对应的依赖就可以了

npm i --save-dev @headlessui/tailwindcss

2. 文件没有被包含到 tailwindcss 中

查看文件有没有被包含到 tailwindcss 中，打开 tailwind.config.js 文件，在 conten 字段中增加我们需要包含的文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,html.j2}",
    "./templates/**/*.html.j2",
    "./public/**/*.{html,js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. vscode 没有开启字符串输入的快速建议

在 vscode 的 setting 中添加下面的配置

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

4. 某些特殊的文件格式没有激活插件

由于 django的 jinja 模板文件,通常以 j2 为拓展名，需要修改 vscode 的配置如下

  "tailwindCSS.includeLanguages": {
    "html": "html",
    "javascript": "javascript",
    "css": "css",
    "typescript": "typescript",
    "jinja-html":"html"
  },
  "files.associations": {
    "*.j2": "jinja-html"
  },
  "editor.quickSuggestions": {
    "strings": true
  }

修改 tailwind.config.js 文件如下，增加对j2格式的支持

module.exports = {
  content: [
    "./src/**/*.{html,js,html.j2}",
    "./templates/**/*.html.j2",
    "./public/**/*.{html,js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};