# Panda CSS — Type-Safe CSS-in-JS with Build-Time Generation

> A universal, type-safe CSS-in-JS framework that generates atomic CSS at build time, offering the developer experience of runtime styling libraries with zero runtime cost.

## Install

Save as a script file and run:

# Panda CSS — Type-Safe CSS-in-JS with Build-Time Generation

## Quick Use
```bash
npm install -D @pandacss/dev
npx panda init --postcss
```
```tsx
import { css } from "../styled-system/css";
function Button() {
  return (
    <button className={css({ bg: "blue.500", color: "white", p: "4", rounded: "lg" })}>
      Click me
    </button>
  );
}
```

## Introduction
Panda CSS is a build-time CSS-in-JS engine from the Chakra UI team. It extracts styles at compile time and emits atomic CSS classes, combining the type-safe authoring experience of runtime CSS-in-JS libraries with the performance of utility-first frameworks. It works with React, Vue, Solid, Svelte, and any framework that outputs HTML with class names.

## What Panda CSS Does
- Extracts CSS-in-JS style declarations at build time into atomic CSS utility classes
- Provides a type-safe `css()` function with autocompletion for every CSS property and design token
- Generates a styled-system directory with typed utilities, tokens, and recipe functions
- Supports design tokens, semantic tokens, text styles, and layer styles in the config
- Handles responsive styles, pseudo-classes, and conditional expressions in the style API

## Architecture Overview
Panda CSS runs as a PostCSS plugin or CLI during the build. It scans source files for calls to css(), cva(), and other style functions, then extracts the style declarations. Each unique property-value pair becomes an atomic CSS class. The generated stylesheet is a static CSS file with no JavaScript runtime. The styled-system codegen step produces TypeScript utilities that reference these atomic classes, providing full type safety and IDE autocompletion through the generated types.

## Self-Hosting & Configuration
- Initialize with `npx panda init --postcss` to generate the panda.config.ts and PostCSS integration
- Define design tokens (colors, spacing, fonts) in the config file for consistent theming
- Set content paths in the config to tell Panda which files to scan for style usage
- Use recipes and slot recipes to define component variant APIs with type-safe props
- Extend or override the default preset to customize breakpoints, conditions, and utilities

## Key Features
- Zero runtime CSS generation with all styles extracted at build time
- Full TypeScript autocompletion and type checking for every style property and token
- Atomic CSS output that deduplicates identical property-value pairs across the entire app
- Recipes API for defining component variants with compound conditions
- Framework-agnostic design working with React, Vue, Solid, Svelte, Astro, and Qwik

## Comparison with Similar Tools
- **Tailwind CSS** — utility-first with class strings; Panda CSS uses a typed function API with better IDE support for complex conditions
- **Vanilla Extract** — type-safe CSS with build-time extraction; Panda CSS adds design tokens, recipes, and atomic CSS deduplication out of the box
- **Stitches** — runtime CSS-in-JS with variants; Panda CSS moves all work to build time with no runtime overhead
- **UnoCSS** — instant on-demand atomic CSS engine with regex matching; Panda CSS provides a structured function API with full type safety

## FAQ
**Q: Does Panda CSS add any JavaScript runtime?**
A: No. The css() function resolves to plain class name strings at build time. The output is a static CSS file.

**Q: Can I use Panda CSS with an existing Tailwind project?**
A: You can run them side by side, but they serve the same purpose. Migration guides exist for transitioning from Tailwind to Panda CSS.

**Q: How does it handle responsive styles?**
A: Use the responsive syntax in the css function: `css({ fontSize: { base: "sm", md: "lg" } })`. Breakpoints are defined in your config.

**Q: Does Panda CSS support server-side rendering?**
A: Yes. Since styles are static CSS files, they work with any SSR framework without hydration issues.

## Sources
- https://github.com/chakra-ui/panda
- https://panda-css.com

---
Source: https://tokrepo.com/en/workflows/asset-a89c9031
Author: Script Depot