dcasia/mini-program-tailwind

简单看了下源码，貌似暂不支持js/ts中定义的externalClasses？

dhlolo opened this issue · 2 comments

ItsRyanWu commented

对于自定义名称的 externalClasses 的兼容需要从 Tailwind/Windi CSS 解析器的层面去解决，这个不属于本插件的解决范围。
但感谢你的提醒，粗略估计即使很少有人会将本插件与原生小程序进行集成，我也会在文档中补充相关注意事项。

如果真的遇到在将本插件与原生小程序进行集成时需要用到 externalClasses 的场景，有一个巧妙的方法是将该 externalClasses 名称声明为 'class'：

// custom-component.js
Component({
  externalClasses: [ 'class' ]
})

以这种方式是可以保证在组件被使用时正常使用原子化 css 的 class name 的：

<custom-component class="w-115px h-15px filter invert"/>

这种方式已正常使用在线上原生小程序产品中：
image

dhlolo commented
  • Tailwind理论上上不会支持这种国产非标情景
  • 既然叫mini-program-tailwind，理论上就是桥接Tailwind方案到小程序的case
  • 上述的解决方式也可以用在你们的仓库中，解析observerClasses后替换成class以兼容Tailwind，同时辅以类似styleIsolation: apply-shared的约定
  • 👀1