uniapp微信小程序安装tailwindcss编译失败的解决思路-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序安装tailwindcss编译失败的解决思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天在uniapp上安装tailwindcss后，微信开发工具一直报wxss编译失败的错：如下图。

uniapp微信小程序安装tailwindcss编译失败的解决思路

想来应该是Postcss没有把tailwindcss编译成css，所以app.wxss识别不了导致的问题。网上找了一圈，也没有太好的办法。

后来想了个不太灵活的办法，既然识别不了，可以手动转换成css在引入到app里面不就可以了吗。

原理就是利用使用 Tailwind CLI工具生成 CSS，这样无需配置 PostCSS 或甚至不需要安装 Tailwind 作为依赖项。

根据tailwind.config.js的配置，生成对应css。

// 指定生成的tailwind.css文件在src/style文件夹下
npx tailwindcss -o ./src/style/tailwind.css

再在App.vue里或者Main.js里把生成好的tailwind.css文件import进来就可以了。

刚引进来后，上图的编译失败没有了，但是遇到了另外一个问题

uniapp微信小程序安装tailwindcss编译失败的解决思路

这是因为小程序不支持 *，把这一段在css里面删除就一切正常了。

这里可以用一下github上的一个库文件：WeAppTailwind，里面有个minify文件，可以自动删除 * 通配符并且压缩。

用法如下，在文件根目录引入该文件，然后在命令行里加一句：

"build:css": "npx tailwindcss -o ./src/style/tailwind.css && node ./minify.js",

后面编译好的css文件后就可以自动压缩了。

另外：兼容小程序可以使用第三方写好的预设：tailwindcss-miniprogram-preset

参考文章：

1. tailwindcss 小程序定制化之旅

2. uniapp +vue3+ts+tailwindcss 开发搭建兼容小程序版本文章来源地址https://www.toymoban.com/news/detail-491820.html

到了这里，关于uniapp微信小程序安装tailwindcss编译失败的解决思路的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

uniapp微信小程序安装tailwindcss编译失败的解决思路