[Feature Request]支持 windicss

[transtone]

https://cn.windicss.org/integrations/webpack.html

有计划支持一下使用 windicss 开发吗？

[hiyuki]

我们研究一下

[waltcow]

之前试过可以这样用tailwindcss

https://github.com/theowenyoung/mini-tailwind

[transtone]

之前试过可以这样用tailwindcss

https://github.com/theowenyoung/mini-tailwind

windicss 比 tailwind 方便。

就是因为 taro 下可以用，所以才尝试在这边提一下。 https://github.com/pcdotfan/taro-plugin-tailwind

公司项目用的mpx，不方便一下转成 taro，如果有一些改进的方案就最好了。

[Lewage59]

支持的，已经在业务上小范围使用了，其实 windicss 的原理和框架无关，但如果想要在小程序上落地，需要整体对 windicss 进行配置一下，并禁用一些 windicss 能力，具体可以参考一下 https://juejin.cn/post/7040409435826552846

[ItsRyanWu]

支持的，已经在业务上小范围使用了，其实 windicss 的原理和框架无关，但如果想要在小程序上落地，需要整体对 windicss 进行配置一下，并禁用一些 windicss 能力，具体可以参考一下 https://juejin.cn/post/7040409435826552846

按照你的方法我试着在 MPX 里集成了 windi 但看起来 MPX 无法支持，在 style block 里引用 windi 生成的 css 文件后 webpack 会生成 virtual module 然后 dist 目录也会出现一个 missing-filename.wxss 里面包含对于 virtual module 的引用，此时无论如何都无法引用该 missing-filename.wxss 文件来将 windi 的生成结果引用到小程序打包目录中

[Lewage59]

按照你的方法我试着在 MPX 里集成了 windi 但看起来 MPX 无法支持，在 style block 里引用 windi 生成的 css 文件后 webpack 会生成 virtual module 然后 dist 目录也会出现一个 missing-filename.wxss 里面包含对于 virtual module 的引用，此时无论如何都无法引用该 missing-filename.wxss 文件来将 windi 的生成结果引用到小程序打包目录中

有几个问题需要确认一下：

1. 你是在什么操纵系统下运行项目？Mac 还是 window？
2. 是在src目录下的app.mpx文件中引入的<style src="windi.css"></style>吗？

[ItsRyanWu]

按照你的方法我试着在 MPX 里集成了 windi 但看起来 MPX 无法支持，在 style block 里引用 windi 生成的 css 文件后 webpack 会生成 virtual module 然后 dist 目录也会出现一个 missing-filename.wxss 里面包含对于 virtual module 的引用，此时无论如何都无法引用该 missing-filename.wxss 文件来将 windi 的生成结果引用到小程序打包目录中

有几个问题需要确认一下：

1. 你是在什么操纵系统下运行项目？Mac 还是 window？
2. 是在src目录下的app.mpx文件中引入的<style src="windi.css"></style>吗？

@Lewage59 对的，我用 Mac，具体问题我已经描述在 issue #943 中了，目前的话我只能用 windicss CLI 在 src 目录中生成 css 文件，然后通过在 app.mpx 内的 style block 内用 @import 才可以引入，用 style src 暂时未找到正确方式引入

[waltcow]

刚试了下集成windicss，完美使用中，关于theme preset 可以参考 https://github.com/sonofmagic/tailwindcss-miniprogram-preset/blob/e93e921296/src/defaultConfig.ts

[ItsRyanWu]

刚试了下集成windicss，完美使用中，关于theme preset 可以参考 https://github.com/sonofmagic/tailwindcss-miniprogram-preset/blob/e93e921296/src/defaultConfig.ts

真的可以完美使用吗？你是如何解决类似 w-[5.5px] 以及 translate-x-1/2 的问题的？你推荐的这个 tailwind 预设我也试过，但只能当作一个临时方案

[Lewage59]

真的可以完美使用吗？你是如何解决类似 w-[5.5px] 以及 translate-x-1/2 的问题的？你推荐的这个 tailwind 预设我也试过，但只能当作一个临时方案

可参考 https://cn.windicss.org/plugins/interfaces.html ，具体实现可看 https://juejin.cn/post/7040409435826552846 文章底部提到的方式。（windicss相关问题建议去windicss中讨论更有效）

[ItsRyanWu]

MPX 适配 Windi CSS 的问题已得到解决，可以使用此 Webpack 插件：https://github.com/dcasia/wechat-mini-program-tailwind ，跟随文档操作即可。

开发过程中无需改变写法，保持和 Web 项目一致的编写语法，一样可以使用 JIT/Value auto-infer 功能，不会增加开发者心智负担。如果遇到问题可以随时在该插件项目中提 issue 我会负责解决。

思路分享：让你的小程序用上原汁原味的 Tailwind/Windi CSS (JIT 兼容版)