Panda CSS

概述

🚀 Panda 是一个样式引擎，它通过类型安全且可读的方式生成原子 CSS 和样式配方（recipes）的基础样式。Panda 融合了 CSS-in-JS 的开发体验和原子 CSS 的性能优势。它利用静态分析技术扫描你的 JavaScript/TypeScript 文件中的 JSX 样式属性和函数调用，按需生成样式（即 Just-in-Time 模式）。

💡 简而言之：
Panda 是一个 CSS-in-JS 引擎，在构建时（通过 CLI 或 PostCSS）生成原子 CSS。

安装指南

通用安装方式

1. Panda CLI
   使用 Panda CLI 工具是最简单的入门方式：

   npm install -D @pandacss/dev
   npx panda init
   # 或
   panda init --postcss  # 启用 PostCSS 模式

   注：CLI 提供项目初始化与样式生成命令

2. 使用 PostCSS
   推荐将 Panda 作为 PostCSS 插件集成到项目中：

   // postcss.config.js
   module.exports = {
     plugins: {
       '@pandacss/dev/postcss': {} // 启用 Panda 插件
     }
   }

框架专用指南

针对不同前端框架的集成方案：

• Next.js：使用 @pandacss/next 插件
• Vite：配置 @pandacss/vite 插件
• 其他框架：通过 PostCSS 或 CLI 集成

核心功能

1. Tokens → 设计令牌

自定义颜色、排版等设计系统变量：

// panda.config.ts
export default defineConfig({
  theme: {
    tokens: {
      colors: {
        primary: { value: '#1d4ed8' } // 定义主色
      }
    }
  }
})

2. Recipes → 样式配方

创建可复用的类型化样式变体：

import { cva } from 'pandacss';

const button = cva({
  base: { padding: '8px' }, // 基础样式
  variants: {
    size: {
      sm: { fontSize: '14px' }, // 小尺寸变体
      lg: { fontSize: '18px' }  // 大尺寸变体
    }
  }
});

// 使用示例
<button className={button({ size: 'lg' })} />

3. Patterns → 布局模式

内置高效布局模式（如 stack/flex/grid）：

import { Stack } from 'pandacss/jsx';

<Stack direction="column" gap="20px">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

4. Utilities → 自定义工具

扩展自定义 CSS 属性：

// panda.config.ts
utilities: {
  extend: {
    shadow: {
      values: { 'dark-lg': '0 10px 15px rgba(0,0,0,0.5)' } // 自定义阴影
    }
  }
}

开发工具

Playground 功能

• 实时预览：直接查看 JSX 代码的渲染效果
• 静态分析：检查 Panda 从代码中提取的样式规则
• CSS 输出：预览生成的静态 .css 文件内容

👉 https://panda-css.com/playground

鸣谢

Panda 的灵感来源于以下优秀项目：

• https://tailwindcss.com/
• https://stitches.dev/
• https://vanilla-extract.style/

总结

🎯 Panda CSS 核心价值总结

⚙️ 工作流程示意图

✅ 推荐使用场景

1. 追求开发体验与性能平衡的项目
2. 需要严格类型控制的样式系统
3. 中大型应用的样式架构优化