更新记录
1.0.7(2022-08-05)
下载此版本
- 修复textarea组件中对maxlength的错误处理
- 修复tailwindcss部分不兼容nvue的bug
1.0.5(2022-06-22)
下载此版本
- 兼容mp-html包
1.0.4(2022-06-21)
下载此版本
- 修改bug
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.4.10 app-vue app-nvue |
× |
√ |
√ |
√ |
× |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
注意
vite-plugin-uni-twucss是vite插件,请使用npm或yarn下载,demo请下载示例项目
- 因HBuilderX自带的node版本太低,所以demo是无法直接运行起来的,需自行替换成最新的稳定版本node
- 替换掉node后会不会有影响?暂时没有发现,能“运行”也能“发行”,云打包也没发现问题。
插件说明
- 将tailwindcss、windicss、unocss编译后的css再次编译成支持uniapp中的小程序端和app-nvue
- 【h5端、纯app-vue、百度小程序、支付宝小程序、钉钉小程序】不需要使用此插件也能支持tailwindcss、windicss、unocss,所以用了此插件也不会去编译它们
- tailwindcss、windicss、unocss编译后的css在各端的展示上都有比较大的差别
- 本开发人员主要用于需要暗黑模式、多主题的项目上,尽量使用简单写法,写法越怪,问题越多
- vite-plugin-uni-twucss插件只起到皮毛作用(最好还是官方去适配),主要还是uniapp、tailwindcss、windicss、unocss它们之间先能编译成功且能编译出对应的css
- 并未完全测试,h5=app-vue>小程序端>app-nvue
目前
- 支持微信小程序、QQ小程序、app-nvue
- 因uniapp编译机制的影响,app-nvue只支持@apply这种写法
后续
- 支持更多小程序
安装
Vite
npm i vite-plugin-uni-twucss
or
yarn add vite-plugin-uni-twucss
// vite.config.js
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import uniTwuCssPlugin from 'vite-plugin-uni-twucss';
import Unocss from 'unocss/vite'
export default defineConfig({
plugins: [
uni(),
Unocss(),
//uniTwuCssPlugin需要放在最后执行
uniTwuCssPlugin({
source: "unocss"
}),
],
})
参数 |
说明 |
默认值 |
可选值 |
source |
app-nvue时使用,修改对应的css |
unocss |
windicss/tailwindcss |
欢迎大家在提交bug时能够附上代码,顺便希望在github上给个star