适配一下这个插件吧 tailwind-children

[a395027720]

require("tailwind-children"),

在使用这个插件的时候小程序端会报错。看能不能适配处理一下

:where(.child_c__i_h-bl_100rpx_br)>:where(:not(.not-child)){height:100rpx!important}:where(.child_c__i_w-bl_100rpx_br)>:where(:not(.not-child)){width:100rpx!important}:where(.child_c_rounded-full)>:where(:not(.not-child)){border-radius:9999px}:where(.child_c_text-bl__h_999_br)>:where(:not(.not-child)){--tw-text-opacity: 1;color:rgb(153 153 153 / var(--tw-text-opacity))}

[sonofmagic]

嗯，我先看看这个插件哈。

[sonofmagic]

报错核心原因：小程序不支持在 > 选择器后面直接加伪类选择器

// wxss 报错
:where(.a) > :where(.b) {
  color: red;
}
:where(.a) > :not(.b) {
  color: red;
}
// wxss 不报错
:where(.a) > view:where(.b) {
  color: red;
}

:where(.a) > view:not(.b) {
  color: red;
}

这个tailwind-children插件中，大量使用了：

:where(.child_c_shadow)>:where(:not(.not-child)){
}
:where(.twin_c_ring-white)~:where(:not(.not-twin)) {
}
:where(.twin_c_ring-white:not(.not-twin)) {
}

导致报错。

[sonofmagic]

我测试了一些case，感觉与其兼容它，不如重写一个，专门适配小程序css选择器的， weapp-tailwind-children 插件来的简单，这个我会放在我的开发计划之中的。

[sonofmagic]

经过小程序真机测试，微信开发者工具认识 :where()选择器，测试机小米11 ->安卓，发现这个选择器会直接移除，所以 weapp-tailwindcss-children 这个小程序特供版，不应该使用 :where 实现。

[sonofmagic]

我发布了 weapp-tailwindcss-children 这个小程序版本的 tailwindcss plugin

https://www.npmjs.com/package/weapp-tailwindcss-children

用法和 tailwind-children 差不多，先用用看，有什么不满足的地方或者其他需求再提吧。