基于Vite的Vue3+Tailwindcss项目热重载失效需频繁重启服务如何解决

问题表现 #

• 基于Vue3+TailwindCSS+Vite技术栈搭建项目时，出现仅Tailwind类名修改不触发热重载的异常
• 页面HTML内容变更可正常触发热重载，样式变更必须重启npm run dev服务才能生效
• 尝试禁用Chrome缓存后问题仍未解决，复现环境Node版本为v16.13.0

根因说明 #

第三方Vite启动模板的Tailwind配置、依赖版本存在适配缺陷，导致热更新监听逻辑异常。

解决方案 #

删除原第三方模板初始化的项目，按照TailwindCSS官方针对Vue(Vite)场景的标准搭建流程重新初始化项目即可修复该问题。

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