Skip to main content
weapp.dev
Back to the stack
Stable
Styling
WeChatTarouni-appWebPanda CSSPostCSS

weapp-pandacss

Bring Panda CSS generation to mini-apps

A Panda generation plugin and PostCSS adapter keep generated classes aligned with mini-app CSS selectors. Keep Panda’s css, recipes, and tokens workflow, with a Web target too.

Maintained by: sonofmagic and contributors

Install

ForTeams using Panda CSS in Taro, uni-app, or weapp-vite + Wevu projects.

pnpm add -D @pandacss/dev@2.1.2 @pandacss/preset-base@2.1.2 @pandacss/preset-panda@2.1.2 weapp-pandacss postcss

Configure the generation plugin and PostCSS using the official guide after installation.

ENGINEERING PROOF

Bring Panda CSS generation to mini-apps

Start with a real config, command, or boundary note when deciding if this project fits your codebase.

project.mdStable
  • Generation: register weappPanda() in panda.config.ts.
  • Style build: run Panda PostCSS, weapp-pandacss/postcss, then optional unit conversion.
  • Runtime: import css, recipes, and tokens from generated code; use separate output directories for H5 and mini-apps.

Core capabilities

  • Panda CSS 2.1.2 generation plugin
  • Mini-app PostCSS selector transforms
  • Consistent runtime class encoding
  • css, recipes, and tokens

Common use cases

  1. 01Use Panda CSS in Taro React / Vue 3 mini-apps
  2. 02Generate styles for uni-app Vue 3 and weapp-vite + Wevu
  3. 03Use separate H5 and mini-app output directories with shared class encoding

Platforms

WeChatTarouni-appWeb
Current version
v2.0.1
Oct 9, 2026
Weekly downloads
71
GitHub Stars
17

Frequently asked questions

How do I integrate weapp-pandacss?

Install Panda CSS 2.1.2, both presets, the adapter, and PostCSS. Register weappPanda() in Panda config, then order PostCSS plugins as Panda, adapter, and optional unit conversion. Run panda codegen before development or builds.

Can H5 and mini-apps share an output directory?

Parallel builds need separate outdir values and aliases mapped to each directory. Web uses target: web; mini-apps use the default target: weapp. See the official documentation for integration details and limits.

Future documentation path

/docs/weapp-pandacss/

This path will become canonical when aggregated documentation launches.

Implementation scope

Compatibility assessment required

This project can inform a technical selection discussion. Implementation services for this tool are not confirmed. Review the official documentation, maintainer support, and repository first; no official partnership or support commitment is implied.

Analytics preferences

Baidu Analytics and Google Analytics are enabled by default on the production site to measure visits and limited interactions. You can turn them off at any time.