sonofmagic/weapp-tailwindcss

不推荐在 class 里，直接使用rpx单位，比如 `text-[32rpx] border-[10rpx]`. 源自于 `tailwindcss 3.2.x` 改动导致一些rpx写法的变化，建议一看，持续追踪

sonofmagic opened this issue · 8 comments

sonofmagic commented

自 tailwindcss 3.2.x 开始，jit 引擎加入了 css unit 校验，而 rpx 被 tailwindcss 认为是非法单位，所以就不被识别成长度单位，反而变成了 color 属性，从而被 IDE 和真机忽略。

建议遇到这种场景，直接写 css ，不要使用 Arbitrary values 写法

sonofmagic commented

我们以 uni-app vite vue3 的 h5 模式为例, tailwindcss 3.2.1

.text-\[32rpx\] {
    color: 1rem;
}
.border-\[10rpx\] {
    border-color: 0.3125rem;
}
.text-\[32px\] {
    font-size: 32px;
}
.border-\[10px\] {
    border-width: 10px;
}

可以看到，任意值的解析发生了变化，不知道这是特性还是bug，所以为了避免这种情况，建议不要直接在 class 里写 rpx 单位

mo-n commented

能不能把rpx转成vw

sonofmagic commented

可以的，我写了一个postcss插件 postcss-rpx-transform

用来反向把小程序的 rpx 单位，转化为 px，rem，vw 这些单位。完全可以拿来一起使用的。

源码: https://github.com/sonofmagic/postcss-rpx-transform

mo-n commented

可以的，我写了一个postcss插件 postcss-rpx-transform

用来反向把小程序的 rpx 单位，转化为 px，rem，vw 这些单位。完全可以拿来一起使用的。

源码: https://github.com/sonofmagic/postcss-rpx-transform

环境：vite、vue3、uni-app

试了一下，编译成小程序，因为没有class转换。tailwindcss依然识别成颜色。

.border-t-_bl_10rpx_br_ {
    border-top-color: 5px;
}

编译成h5，uni-app 则会默认将rpx转为rem

可不可以把-xxrpx 转为--xxvw这样标准的数值单位, 然后交给uni-app与tailwindcss处理

border-t-[7.5rpx]

转换为

border-t-[1vw]
sonofmagic commented

其实是可以的，不过处理这种情况，就用不上postcss rpx转化了，需要的其实是一个 tailwindcss plugin，把rpx识别成颜色的行为，纠正回来，然后再进行对应的转化，或者保持rpx的原样。

这个我考虑写一个 support rpx 的 tailwindcss 插件。

  • 🎉1
sonofmagic commented

支持rpx单位，有了新的解决方案，详见 CHANGELOG.md#1200-3-2022-11-20

sonofmagic commented

image
base on tailwindcss 3.2.4