打开微信开发者工具热重载，修改Arbitrary values会失效

[obstrux]

描述这个Bug
打开热重载，修改Arbitrary values会失效

如何重现
打开微信开发者工具的热重载

期望行为(可选)
期望可以正常加载生成的样式

屏幕截图(可选)

运行环境

• OS: macos 12.3.1 (21E258)
• Nodejs: v12.22.7
• Framework: uni-app

Additional context
Add any other context about the problem here.

[sonofmagic]

你好啊，这个代码热重载，我看一般都是写原生小程序开启的。
你用 uni-app 写的话，应该使用的是 webpack 的 热重载，不是用的微信开发者工具的热重载吧。

[obstrux]

你好啊，这个代码热重载，我看一般都是写原生小程序开启的。 你用 uni-app 写的话，应该使用的是 webpack 的 热重载，不是用的微信开发者工具的热重载吧。

uniapp结合这个使用的，就会出现这个情况，这个热重载是重载样式文件

[obstrux]

你好啊，这个代码热重载，我看一般都是写原生小程序开启的。 你用 uni-app 写的话，应该使用的是 webpack 的 热重载，不是用的微信开发者工具的热重载吧。

tailwind.config.js 中自定义了spacing，好像负值就失效了

[sonofmagic]

你好啊，你应该用的是 tailwindcss v2 额 jit 模式，在这个模式下，这种 -mt-2 这种 -xxx-2 的写法，在 jit 引擎下，实际上已经废弃了，详见docs/margin，这种情况是你试试 u-mt-[-60rpx] 呢

[obstrux]

你好啊，你应该用的是 tailwindcss v2 额 jit 模式，在这个模式下，这种 -mt-2 这种 -xxx-2 的写法，在 jit 引擎下，实际上已经废弃了，详见docs/margin，这种情况是你试试 u-mt-[-60rpx] 呢

jit模式是可以不在config文件中定义，可以直接写，jit 模式下，不在配置文件中定义的话，我试了u--mt-60 这种写法也是支持的

[sonofmagic]

好的呀，能给一下你的 tailwind.config.js 和 一些配置吗？ 我复现一下。

[obstrux]

好的呀，能给一下你的 tailwind.config.js 和 一些配置吗？ 我复现一下。

// tailwind.config.js

module.exports = {
  mode: 'jit',
  prefix: 'u-',
  purge: {
    content: ['./src/**/*.{vue,js,ts,jsx,tsx,wxml}'],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      spacing: {
        60: '60rpx',
      },
    },
  },
  variants: {},
  plugins: [],
  corePlugins: {
    preflight: false,
  },
}

// xxx.vue

<template>
 不支持 自定义数值的负值
<view class="u--mt-60 u--mt-80" />

 不支持 var变量
<view class="u-text-[var(--primary-color-hex)] u-bg-[var(--primary-color-hex)]">
<text>test</text>
</view>
....
</template>

[sonofmagic]

好的， jit var 变量的确不支持，我会改进的。

[obstrux]

好的， jit var 变量的确不支持，我会改进的。

谢谢，真的很感谢能出这个开源库支持

[sonofmagic]

目前

<!-- Will generate a font-size utility -->
<div class="text-[length:var(--my-var)]">...</div>

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">...</div>

是支持的，可以先用一下

[sonofmagic]

20220527 性状补充：

1. taro框架，打开微信开发者工具热重载，修改 Arbitrary values，会触发此插件和 tailwindcss 的生成机制，生成新的样式。而且*.js里的所有 className 已经热更新并重命名完成，但是却没有触发 wxml 的重新编译，导致 wxml dom 上绑定的 class 还是老的。这也许是微信的bug？我将会去 uni-app 社区和 taro 社区，寻找答案和对应的解决方案。
2. uni-app for vue3 的 vite 版本倒是没有这个问题，因为即使打开微信开发者工具热重载，uni-app 照样全量编译，完全不鸟这个选项。这相当于破坏了这个功能。
3. uni-app for vue2，打开微信开发者工具热重载，和 taro框架是同一个问题导致的。即更改 vue 文件里的 class，微信IDE里的 wxml class 未更新到最新，导致样式匹配不上。