Panda CSS 在构建阶段生成纯 CSS 文件，零运行时开销；静态分析样式代码并提取为原子类，输出标准 CSS 文件，不打包运行时逻辑，依赖显式构建流程。
它不是“运行时生成样式”，而是构建阶段就吐出纯 CSS 文件——所以根本不存在 JS 计算样式、插入 style 标签、响应 props 变化重排这些开销。
零运行时 = 构建时完成所有样式提取
Panda CSS 的核心动作发生在 panda build 或开发服务器启动时的编译阶段。它会静态分析你的 css 对象、sx 属性、styled 调用，把所有样式规则抽象成原子类（如 text-sm、bg-blue-500），然后直接写入 styled-system/css/index.css 这类静态文件。
这意味着：
- 运行时 DOM 中不会出现
<style></style>标签动态注入 - 没有
useEffect或useMemo去缓存样式对象 - 组件渲染不依赖任何 Panda 运行时函数（比如
css()不会在浏览器里执行） - 最终产物里压根没有 Panda 的 JS 样式逻辑代码（tree-shaking 后连
node_modules/panda-css都不打包进去）
对比 styled-components / Emotion 的关键差异
传统 CSS-in-JS 框架（如 styled-components）必须在每次组件挂载/更新时调用 JS 函数来计算哈希类名、拼接 CSS 字符串、插入 <style></style> 标签——这带来三重负担：
- 首屏 JS 执行时间增加（尤其 SSR 场景下 hydration 前要先解析样式）
- 内存占用：每个组件实例都可能持有样式缓存对象
- 无法被传统 CSS 工具链（如 PurgeCSS、Lightning CSS）识别和优化
而 Panda CSS 输出的是标准 CSS 文件，可直接走 postcss、lightningcss、甚至 CDN 缓存；同时支持原生 @layer 分层控制优先级，无需模拟层叠逻辑。
你得手动触发构建，否则样式不生效
这是最容易卡住新手的地方：Panda CSS 不是“装完就能用”的库，它依赖显式构建流程。
- 没跑过
panda build，styled-system/css目录为空 → 页面无样式 - Vite 开发模式下，需确保
vite.config.ts正确加载了@pandacss/dev/vite插件，否则 HMR 不会触发样式重生成 - 修改
panda.config.ts后，必须重启 dev server（不是热更），因为配置变更会影响整个提取逻辑 - 若使用
css()工具函数生成内联 style 对象，它只在开发期提供类型提示，实际仍靠构建时提取——别指望它能在浏览器里“实时计算”
CSS 变量和设计令牌的处理也在构建时固化
你写的 colorPalette: { blue: { 500: '#3b82f6' } } 不会在运行时变成 JS 对象再映射到 CSS 变量；Panda 在构建时就展开成：
:root {
--colors-blue-500: #3b82f6;
}
后续所有 color="blue.500" 都被替换成 color: var(--colors-blue-500) ——没有运行时查表、没有字符串拼接、没有条件判断。这也是为什么暗色模式切换能秒级生效：只是切换一个 class 到 上，CSS 变量值由另一套 :root[data-theme="dark"] 规则定义，全部静态预置。
真正难的不是写 sx 或 styled，而是理解“样式即配置”——所有逻辑必须能在构建时静态推导，任何依赖运行时状态（比如用户偏好、API 返回值）的样式，都不能进 Panda 的提取管道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
