tailwindcss v2 版本下开启 TAILWIND_MODE=watch 的环境变量会导致高版本 hbuilderx 重复差量编译

[cgy859854649]

描述这个Bug 今天升级了hbuilderx到3.98，结果项目一运行就一直重复编译，排查了一下午怀疑是 tailwindcss的问题。 于是我使用新建了一个uniapp项目并安装配置了tailwindcss，结果不出所料，模板中每有一条tailwindcss类名就会差量编译一次

屏幕截图(可选)

运行环境

• OS: [e.g. iOS]
• Nodejs: 16x
• Framework: uni-app/taro/remax/rax

Additional context Add any other context about the problem here.

[sonofmagic]

嗯，好的我排查一下， 低hbuilderx版本不会出现这个问题是吧？ 另外你使用的 weapp tailwindcss 版本是多少？ 还有是uni app vue3 vite 嘛？

[sonofmagic]

项目: https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template ， 依赖项: "tailwindcss": "^3.3.5", "weapp-tailwindcss": "^3.0.0" 我的系统是: MacOS 14.2 经过测试， hbuilderx 3.96 是ok的，没有这个问题 升级到 hbuilderx 3.98 ，更改类名后保存也是ok的: 可以看到图上，只差量编译编译了一次

我需要更多更加详细的信息补充，以复现你这个问题

或者你可以提供可以复现的demo link

[cgy859854649]

依赖项 "devDependencies": { "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "postcss-rem-to-responsive-pixel": "^5.1.3", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17", "weapp-tailwindcss-webpack-plugin": "^1.12.8", "webpack": "npm:webpack@^4.46.0" } 之前在3.7版本是好好的，3.96以上的版本就会重复编译

[sonofmagic]

这次我用了这个模板 https://github.com/sonofmagic/uni-app-vue2-tailwind-hbuilder-template 依赖项和你应该是一样的 也去使用了macos 的 hbuilderx 3.98 版本运行，修改之后结果如下

差量编译也只出现了一次，没有复现这个问题，你可以试试用你的 hbuilderx 跑一下这个模板试试

[cgy859854649]

我运行了一遍你这个还是重复编译很多次

[cgy859854649]

win10 hbuilderx3.98

[sonofmagic]

复现过程

我找了个 windows 机器，下载了 hbuilderx3.98 复现了这个问题，排查下来和插件无关，和 tailwindcss v2 的 TAILWIND_MODE 环境变量有关，我把 :

process.env.TAILWIND_MODE = "watch"

这个去掉，差量编译重复的问题就好了，但是这个 TAILWIND_MODE 环境变量是 tailwindcss v2 热更新的开关，假如关了它，你在代码里写 w-[111px] 这样的类名是不会实时生效的，必须要重新编译才会生成。

这个问题只在 windows 上 hbuilderx 出现, macos hbuilderx 没有这样的问题，同时 tailwindcss v3 没有这样的问题。

解决方案

所以解决方案为:

1. 要不你把项目转化成 cli 版本，cli 版本的 vue2 直接使用的 webpack5，postcss8 可以直接使用最新版本的 tailwindcss 和我这个插件。(也有一种 hack hbuilderx,强行让它执行 webpack5,postcss8 的方案，详见这个链接)

2. 或者找个办法，在注入 TAILWIND_MODE 环境变量的同时，hbuilderx 还不会重新差量编译。

3. 或者这个问题反馈给 hbuilderx 官方，看看他们有没有什么方式解决。

另外

我还试了在 package.json 里这样写脚本，结果是无效的:

	"uni-app": {
		"scripts": {
			"dev": {
				"title": "开发微信小程序",
				"browser": "",
				"env": {
					"UNI_PLATFORM": "mp-weixin",
					"TAILWIND_MODE": "watch"
				},
				"define": {}
			}
		}
	}

然后在 vue.config.js 里打印 console.log(process.env.TAILWIND_MODE) 结果也是空的，hbuilderx 环境变量比较封闭，不知道咋搞进去。

[cgy859854649]

好的，太感谢作者了