rpx 任意值颜色或长度单位二义性与解决方案
这是一个什么问题?
在不使用 weapp-tailwindcss
的情况下,你直接写这样的 rpx
写法:
<div class="text-[32rpx]"></div>
最终它会生成这样的 css
:
.text-\[32rpx\] {
color: 32rpx
}
为什么 rpx
这个好端端的长度单位,会变成颜色呢?
原因在于 rpx
不是一个标准的 W3C
规定的 CSS
长度单位,这是微信小程序自己定的 WXSS
单位。
而 tailwindcss
在针对具有二义性的任意值写法,例如以下单位:
text-[]
border-[]
bg-[]
outline-[]
ring-[]
这些会去校验括号内的任意值,是否为有效的 CSS
长度单位写法!
如果为 true
,则生成出长度 css
节点,反之则生成出颜色 css
节点:
/* text-[16px] */
.text-\[16px\] {
font-size: 16px
}
/* text-[#fafafa] */
.text-\[\#fafafa\] {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity))
}
那么问题来了,rpx
在单位校验的时候,由于不认识这个单位,导致单位无效所有被分到了颜色组,所以造成了这个问题!那么如何解决呢?