更新记录

1.0.7(2022-08-05) 下载此版本

  1. 修复textarea组件中对maxlength的错误处理
  2. 修复tailwindcss部分不兼容nvue的bug

1.0.5(2022-06-22) 下载此版本

  1. 兼容mp-html包

1.0.4(2022-06-21) 下载此版本

  1. 修改bug
查看更多

平台兼容性

Vue2 Vue3
×
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请下载示例项目

  1. 因HBuilderX自带的node版本太低,所以demo是无法直接运行起来的,需自行替换成最新的稳定版本node
  2. 替换掉node后会不会有影响?暂时没有发现,能“运行”也能“发行”,云打包也没发现问题。

插件说明

  1. 将tailwindcss、windicss、unocss编译后的css再次编译成支持uniapp中的小程序端和app-nvue
  2. 【h5端、纯app-vue、百度小程序、支付宝小程序、钉钉小程序】不需要使用此插件也能支持tailwindcss、windicss、unocss,所以用了此插件也不会去编译它们
  3. tailwindcss、windicss、unocss编译后的css在各端的展示上都有比较大的差别
  4. 本开发人员主要用于需要暗黑模式、多主题的项目上,尽量使用简单写法,写法越怪,问题越多
  5. vite-plugin-uni-twucss插件只起到皮毛作用(最好还是官方去适配),主要还是uniapp、tailwindcss、windicss、unocss它们之间先能编译成功且能编译出对应的css
  6. 并未完全测试,h5=app-vue>小程序端>app-nvue

目前

  1. 支持微信小程序、QQ小程序、app-nvue
  2. 因uniapp编译机制的影响,app-nvue只支持@apply这种写法

后续

  1. 支持更多小程序

安装

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
乡关何处

2023-09-11

你好请问,使用了该插件以后,还能使用unocss的presets预设吗?

916***@qq.com

2022-10-27

你好请问你是 如何替换掉hbuildx里的node的

自学的烦恼 2022-10-27

升级最新的alpha就行了,官方已经替换成16的了

916***@qq.com 2022-10-27

好的 谢谢

917***@qq.com

2022-08-01

tailwind.config.js 的配置怎么引入 ? 进入不了tailwind.config.js文件

自学的烦恼 2022-08-01

已在github更新README.md说明,后续还有问题麻烦在github上提问,有时候有图片更好说明

liulibug

2022-07-27

运行示例就报错

自学的烦恼 2022-07-27

......建议看看注意事项、评论或者到github看看,因为示例本来就会报错的,而且说了原因了......

Ae丶腾

2022-06-16

很不错

SugerWin

2022-06-16

建议兼容钉钉小程序

自学的烦恼 2022-06-16

收到

自学的烦恼 2022-06-21

经测试,【钉钉小程序】不使用此插件也能编译tailwindcss、windicss、unocss

自学的烦恼

2022-05-24

unocss等用了新语法,demo肯定是直接跑不起来的,原因是HBuilderX的node版本太低,目前node官方版本是16以上(不要18,会有问题),替换掉HBuilderX的node,我的是windows,目录为E:\xx\plugins\node,接下有可能还会提示缺少esbuild-windows-32或者esbuild-windows-64,在目录E:\xx\plugins\uniapp-cli-vite\node_modules下npm或者yarn对应的依赖包即可。

2022-10-27

你好 请问您是如何替换掉hbuildx里的node的 直接替换总是报错

2022-08-19

请问Vue2能使用吗,如果想用需要做哪些配置