SuperAPI AI 工具集

panda-css

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:Panda CSS 是构建时、类型安全的 CSS-in-JS 框架,运行时零开销,适合需要设计系统令牌、recipes 或零运行时样式的项目。

主要能力:提供 css 函数编写样式,支持伪选择器(_hover、_active、_disabled、_focus)、响应式样式(base/md/lg)与条件样式;支持设计令牌与语义令牌(tokens、semanticTokens),可在配置中扩展颜色、间距、圆角等;提供 recipes(cva)定义组件变体与 compoundVariants;提供 patterns(stack、hstack、vstack、center、container)及自定义 patterns;支持 slot recipes(sva)用于多部分组件;可启用 JSX 风格属性(styled、Box、Flex、Stack 等);也可在配置中定义 recipes。

使用方式:安装 npm install -D @pandacss/dev 并执行 npx panda init --postcss;在 panda.config.ts 中配置 preflight、include、exclude、outdir 等;从 styled-system 导入 css、cva、sva、patterns、jsx 等使用。

适用场景:需要类型安全样式、设计令牌体系、可复用组件样式与零运行时 CSS 的前端项目。

限制:资料未提供具体收费、价格、平台支持范围或性能数据;部分高级用法与完整 API 需参考官方文档。