安装
适合使用 Panda CSS，希望在 Taro、uni-app 或 weapp-vite + Wevu 中复用样式生成流程的团队。
pnpm add -D @pandacss/dev@2.1.2 @pandacss/preset-base@2.1.2 @pandacss/preset-panda@2.1.2 weapp-pandacss postcss安装后仍需按官方文档配置生成插件与 PostCSS。
工程证据
把 Panda CSS 的生成样式带进小程序
从一段真实的配置、命令或边界说明开始判断项目是否适合你的工程。
project.md稳定
- 生成期：在 panda.config.ts 中注册 weappPanda()。
- 样式构建：依次运行 Panda PostCSS、weapp-pandacss/postcss 与可选单位转换。
- 运行时：从生成目录导入 css、recipes 与 tokens；H5 和小程序各自使用独立 outdir。
核心能力
- Panda CSS 2.1.2 生成期插件
- 小程序 PostCSS 选择器转换
- 一致的 runtime class 编码
- css、recipes 与 tokens
常见用法
- 01在 Taro React / Vue 3 小程序中使用 Panda CSS
- 02在 uni-app Vue 3、weapp-vite + Wevu 中生成小程序样式
- 03为 H5 与小程序分别生成目录，共享 class 编码
支持平台
WeChatTarouni-appWeb
相关项目
- 当前版本
- v2.0.1
- 2026年10月9日
- 周下载
- 71
- GitHub Stars
- 17
常见问题
weapp-pandacss 如何接入？
安装 Panda CSS 2.1.2、两个 preset、适配器和 PostCSS；在 Panda 配置中注册 weappPanda()，在 PostCSS 中按 Panda、adapter、可选单位转换的顺序注册插件。启动或构建前运行 panda codegen。
H5 与小程序可以共用生成目录吗？
并行构建时必须使用独立 outdir，并把逻辑导入别名映射到各自目录。Web 使用 target: web，小程序默认使用 target: weapp；具体集成与限制见官方文档。
未来文档路径
/docs/weapp-pandacss/
聚合文档上线后，此路径将成为 canonical 地址。