基于 uni-app 的 vite + vue3 + tailwindcss 模板
假如你觉得好用,欢迎给我的 weapp-tailwindcss 点个 Star 吧。
官网地址: https://tw.icebreaker.top/
- 
🎨 TailwindCSS - 世界上最流行,生态最好的原子化CSS框架 
- 
😃 集成 Iconify - icones.js.org 中的所有图标都为你所用 
- 
📥 API 自动加载 - 直接使用 Composition API 无需引入 
- 
🧬 uni-app 条件编译样式 - 帮助你在多端更灵活的使用 TailwindCSS
- 
🦾 TypeScript & ESLint & Stylelint - 样式,类型,统一的校验与格式化规则,保证你的代码风格和质量 
Important
请使用 Node >=22(LTS) 运行此项目! 详见 issues/29
另外谨慎升级 package.json 中锁定的 pinia/vue/@vue/* 相关包的版本,新版本可能 uni-app 没有兼容,造成一些奇怪的 bug
使用 vscode 的开发者,请先安装 Tailwind CSS IntelliSense 智能提示与感应插件
其他 IDE 请参考: https://tw.icebreaker.top/docs/quick-start/intelliSense
把 src/manifest.json 中的 appid, 更换为你自己的 appid, 比如 uni-app / mp-weixin 平台。
- pnpm up:pkg升级除了- uni-app相关的其他依赖
- pnpm up:uniapp升级- uni-app相关的依赖
推荐先使用 pnpm up:pkg 升级, 再使用 pnpm up:uniapp 进行升级,因为 pnpm up:uniapp 很有可能会进行版本的降级已达到和 uni-app 版本匹配的效果
默认情况下,走的是官方 npmjs 源: registry.npmjs.com
假如你访问网速慢,要切换到淘宝镜像源,那就把目录下的 .npmrc 中的 registry=http://registry.npmmirror.com/ 反注释
然后再把 registry=http://registry.npmjs.com/ 注释(前面加个 # 号即可),然后重新进行 pnpm i 安装包即可
本项目默认使用 pnpm@10 进行管理,当然你也可以切换到其他包管理器,比如 yarn, npm
你只需要把 pnpm-lock.yaml 删掉,然后把 package.json 中的 packageManager 字段去除或者换成你具体的包管理器版本,然后重新安装即可
本项目集成的是我自己封装的 @icebreakers/eslint-config 规则,你不喜欢完全可以更换,卸载掉它然后自行配置 eslint,把它变成你想要的样子
本项目已经集成 weapp-ide-cli 可以通过 cli 对 ide 进行额外操作
- pnpm open:dev打开微信开发者工具,引入- dist/dev/mp-weixin
- pnpm open:build打开微信开发者工具,引入- dist/build/mp-weixin
👉 🔥 tarojs / 🔥 uni-app / 🔥 hbuilderx 等更多模板链接
详见:https://github.com/aniftyco/awesome-tailwindcss
你可以在这里找到许多现成的UI,组件模板。
- rem->- rpx(默认开启, 见- vite.config.ts中- uvtw插件的- rem2rpx选项)
- px->- rpx(默认不开启,可在- postcss.config.ts中引入- postcss-pxtransform开启配置)
- 升级 uni-app依赖的方式为npx @dcloudio/uvm后,选择对应的Package Manager即可。而升级其他包的方式,可以使用pnpm up -Li,这个是pnpm自带的方式。
- 使用 vscode记得安装官方插件eslint,stylelint,tailwindcss, 已在.vscode/extensions.json中设置推荐