使用taro-plugin-tailwind插件，在字节小程序里，使用 --watch运行时，无法编译带数值样式

[wa143825]

相关平台

字节跳动小程序

复现仓库

https://github.com/wa143825/windicss-bug 小程序基础库: 2.70.0.5 使用框架: Vue 3

复现步骤

1. 使用npm run build:tt运行项目，windicss提供的样式都是正常
2. 使用npm run dev:tt运行项目，动态编译带数值的属性不生效，如w-100rpx，p-10rpx等，其他大部分样式都生效。
3. 问题主要出现在添加 --watch的时候

期望结果

期望在运行带有--watch命令时，windicss的样式都可以生效

实际结果

只有去掉--watch时运行才可以生效

环境信息

Taro v3.5.6

  Taro CLI 3.5.6 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.13.0 - ~\AppData\Local\pnpm\node.EXE
      Yarn: 1.22.19 - ~\AppData\Local\pnpm\yarn.CMD
      npm: 8.1.0 - ~\AppData\Local\pnpm\npm.CMD

---

补充信息

<view class="w-300rpx h-300rpx pl-30rpx ml-30rpx bg-gray  text-red">
   <text>{{ msg }}</text>
</view>

不添加--watch时，样式都可以生效，添加--watch后，只有bg-gray text-red生效

[wa143825]

使用webpack4也是同样的效果，带--watch就不生效数值类的样式

[Chen-jj]

@wa143825 看了一下，编译结果是正确的：

问题在于字节小程序对 class 的解析：如果类名带有 rpx 该样式就会失效。

因此你应该写 w-300px 而不是 w-300rpx：<view class="w-300px h-300px pl-30px ml-30px bg-gray text-red" />

样式中的 px 单位经 Taro 内置的 PostCSS 插件处理后会换算为 rpx，而类名则是 px 后缀而不是 rpx 后缀，从而解决这个问题。