体验下weapp-tailwindcss小程序里用tailwindcss

教程

体验下weapp-tailwindcss小程序里用tailwindcss

2026-07-18/0/ 编辑


weapp-tailwindcss.webp

一直想学习写个微信小程序来着,几年前折腾过基于微信小程序的微信扫码登录网站功能,不过源码都丢了。最近几年有大佬写了个 weapp-tailwindcss 项目,就是可以用 tailwindcss 来写小程序样式的,告别手写 css

于是乎又想自己写个小程序了,想了好几天也不知道写啥比较好,uniappvue 都不会,还需要重新看下教程。

开始准备

下载安装微信小程序开发工具,然后浏览器打开下面几个网址
weapp-tailwindcss官网:https://tw.icebreaker.top/
uni-app + Vue 3 + Tailwind CSS v4 模板:https://github.com/icebreaker-template/uni-app-tailwindcss-v4
uni-app文档:https://uniapp.dcloud.net.cn/component/
vuejs官网:https://cn.vuejs.org/

操作

weapp-tailwindcss 官网教程可以自己新建项目,但我比较愚钝没折腾明白,官方给的视频教程也是比较旧的,对应不上,不过还好官网给了模板,直接去github下载,导入就行,这样一个可以使用 tailwindcssuniapp 项目就出来了。

然后执行 pnpm 命令发现直接报错,我也看不懂,直接甩个豆包,豆包说我压根没装 pnpm 让我执行这个命令安装:

curl -fsSL https://get.pnpm.io/install.sh | sh -

然后重启终端执行 pnpm -v 进行验证,看是否按转成功。

最后执行 pnpm dev:mp-weixin 编译出小程序版本,打开微信小程序开发工具,导入项目路径即可。

你好单词.webp

这样模板里面的案例就跑起来了,之后按照 uniappvuejs 的文档开发即可。不过鉴于我不会,所以已弃坑!