panda

Panda 是一种面向现代 Web 开发的样式解决方案，被描述为通用、类型安全且可扩展的 CSS-in-JS。它在构建时运行，将样式对象或样式属性提取为 CSS。其核心特性包括：编写在构建时提取的样式对象或属性；使用级联层 @layer 和 CSS 变量输出现代 CSS；兼容大多数 JavaScript 框架；提供类似于 Stitches 的 recipes 和 variants；支持用于同步主题的高级设计令牌（design tokens）；以及通过 codegen 实现带有自动补全的类型安全样式。 安装方式为通过 npm：npm i -D @pandacss/dev，然后执行 npx panda init -p 以搭建配置和 postcss。入口 CSS 文件应包含 @layer reset, base, tokens, recipes, utilities，并在应用中导入。使用示例：import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; 然后使用类名如 hstack({ gap: '30px', color: 'pink.300' }) 或 css({ fontSize: 'lg', color: 'red.400' })。 该 monorepo 包含 cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary 和 shared 等包。项目在 panda-css.com 提供文档，并设有 StackBlitz 演练场、贡献指南和 Discord 社区。本项目采用 MIT 许可。README acknowledge 了来自 Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS 和 Goober 的启发。