panda-css

Panda CSS automates CSS-in-JS styling through static build-time analysis that extracts styles from your source code, generates atomic CSS output, and provides type-safe APIs for components. Configure design tokens, recipes, and extend rules in your Panda config to enable type checking and responsive/conditional styling across your project.

Static analysis at build time scans your source to extract only the styles you use, preventing unused CSS bloat. JIT generation creates atomic CSS output on demand, so your final stylesheet contains only classes your components actually reference, reducing bundle size and improving performance.

Yes, Panda CSS includes built-in design token and theming support. Define tokens for colors, spacing, and typography in your config, then reference them in styled components and recipes. Cascade layer ordering (reset, base, tokens, recipes, utilities) ensures predictable style precedence and makes theme switching straightforward.

Panda CSS recipes and styled components support responsive breakpoints and conditional styling through its type-safe API. Define responsive arrays and conditional objects in your component styles, and Panda generates the necessary media queries and selectors automatically at build time.

No. Panda CSS handles atomic CSS generation and cascade layer management automatically. You define styles through @pandacss packages, styled components, and design tokens in your config; Panda extracts and outputs optimized CSS without manual intervention.