今天在uniapp上安裝tailwindcss后， 微信開發(fā)工具一直報wxss編譯失敗的錯：如下圖。
想來應(yīng)該是Postcss沒有把tailwindcss編譯成css，所以app.wxss識別不了導(dǎo)致的問題。網(wǎng)上找了一圈， 也沒有太好的辦法。
后來想了個不太靈活的辦法，既然識別不了，可以手動轉(zhuǎn)換成css在引入到app里面不就可以了嗎。
原理就是利用使用 Tailwind CLI工具生成 CSS，這樣無需配置 PostCSS 或甚至不需要安裝 Tailwind 作為依賴項。
根據(jù)tailwind.config.js的配置， 生成對應(yīng)css。
// 指定生成的tailwind.css文件在src/style文件夾下
npx tailwindcss -o ./src/style/tailwind.css再在App.vue里或者M(jìn)ain.js里把生成好的tailwind.css文件import進(jìn)來就可以了。
剛引進(jìn)來后，上圖的編譯失敗沒有了， 但是遇到了另外一個問題
?這是因為小程序不支持?*，把這一段在css里面刪除就一切正常了。
這里可以用一下github上的一個庫文件：WeAppTailwind，里面有個minify文件， 可以自動刪除?*?通配符并且壓縮。
用法如下，在文件根目錄引入該文件，然后在命令行里加一句：
"build:css": "npx tailwindcss -o ./src/style/tailwind.css && node ./minify.js",后面編譯好的css文件后就可以自動壓縮了。
另外：兼容小程序可以使用第三方寫好的預(yù)設(shè) ：tailwindcss-miniprogram-preset
參考文章：
1.?tailwindcss 小程序定制化之旅文章來源：http://www.zghlxwxcb.cn/news/detail-491820.html
2.?uniapp +vue3+ts+tailwindcss 開發(fā)搭建兼容小程序版本文章來源地址http://www.zghlxwxcb.cn/news/detail-491820.html
到了這里，關(guān)于uniapp微信小程序安裝tailwindcss編譯失敗的解決思路的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
