VS Code中Tailwind CSS IntelliSense在Handlebars内联脚本无补全求助

要让TailwindCSS IntelliSense在text/x-handlebars-template类型的内联脚本中正常工作，需要通过VS Code配置让插件识别该类型内容为HTML，并确保Tailwind能扫描到模板文件，具体步骤如下：

• 配置文件关联，让VS Code识别Handlebars文件为HTML
  打开VS Code设置（快捷键Ctrl+,或Cmd+,），搜索files.associations，点击「编辑 in settings.json」，添加以下配置：

  "files.associations": {
    "*.hbs": "html",
    "*.handlebars": "html"
  }
  

• 让TailwindCSS插件识别内联Handlebars脚本为HTML
  在settings.json中继续添加Tailwind插件的语言关联配置，确保text/x-handlebars-template类型的内容被当作HTML处理：

  "tailwindCSS.includeLanguages": {
    "handlebars": "html",
    "text/x-handlebars-template": "html"
  }
  

• 确保Tailwind配置扫描到模板文件
  检查你的tailwind.config.js，确保content字段包含了存放Handlebars模板的文件路径，示例：

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

• 可选：给script标签添加lang属性强化识别
  如果上述配置仍有问题，可以在内联脚本标签上添加lang="html"属性，帮助VS Code和插件更准确识别内容类型：

  <script id="output" type="text/x-handlebars-template" lang="html">
    {{#each images}}
      <div class="swiper-slide">
        <div class="swiper-carousel-animate-opacity">
          <img class="bg-red" src="{{url}}" alt="{{alt}}" />
        </div>
      </div>
    {{/each}}
  </script>
  

完成以上配置后，重启VS Code，内联Handlebars脚本中的Tailwind类名应该就能正常触发自动补全了。

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