panda-css

name	panda-css
description	Work on Panda CSS styling, setup, and extraction, including `css`, `styled`, style props, patterns, recipes, tokens, presets, utilities, `panda.config.*`, and `styled-system`.

panda-css

Panda is a build-time styling system. Preserve static analyzability, treat styled-system output as generated unless the repo clearly versions it, and fix setup or extraction issues before rewriting component styles.

Start Here

• Inspect the current integration before editing. Check panda.config.*, the project scripts, the generated outdir, and where the Panda CSS output is imported.
• Load overview-and-faq.md for Panda's execution model, browser support, high-level tradeoffs, and common FAQ answers.
• Load installation.md for framework-specific setup, PostCSS versus CLI integration, and setup troubleshooting.
• Load styling-foundations.md for cascade layers, conditional styles, extend, global styles, integration hooks, JSX style context, and style merging.
• Load patterns-recipes-and-responsive.md for patterns, cva, config recipes, slot recipes, responsive variants, and recipe tracking rules.
• Load jsx-style-props-and-writing-styles.md for JSX style props, styled-system authoring, template literals, virtual colors, and nested style composition.
• Load theming-and-tokens.md for tokens, semantic tokens, layer styles, text styles, animation styles, Panda Studio, and runtime token access.
• Load utilities.md for utility-prop behavior and property-level authoring.
• Load customization.md for custom conditions, presets, config helpers, theme extensions, custom utilities, and deprecations.
• Load guides-and-troubleshooting.md for dynamic styling, component-library packaging, debugging, custom fonts, multi-theme tokens, and static CSS generation.
• Load migration.md when porting code from Stitches, Styled Components, or Theme UI.
• Load cli-and-config.md for CLI commands and panda.config.* options.
• Search ./references/guides-and-troubleshooting.md with rg -n "staticCss|token\\.var|css\\.raw|runtime conditions|dynamic styling".
• Search ./references/patterns-recipes-and-responsive.md with rg -n "cva|defineRecipe|slot recipe|splitVariantProps|jsx:".
• Search ./references/cli-and-config.md with rg -n "defineConfig|importMap|outdir|include|exclude|presets|jsxFramework".

Workflow

• Confirm whether the project uses Panda through PostCSS, panda --watch, or explicit panda codegen or panda cssgen commands before changing build scripts.
• Preserve static extraction. Inline statically knowable values, avoid renaming style or variant props in ways Panda cannot track, and prefer recipes, CSS custom properties, semantic tokens, or data-* and condition-based styling over opaque runtime values.
• Choose the smallest authoring primitive that matches the job. Use css and utilities for one-off styles, patterns for layout primitives, cva for colocated variants, and config recipes for design-system components or responsive recipe variants.
• Prefer tokens and semantic tokens over raw literals when the codebase already has a theme.
• Keep importMap, include, exclude, and CSS imports aligned with the actual module paths. Missing styles are often configuration or layer issues rather than component bugs.
• Run the relevant Panda command after config or recipe changes. In most repos that means panda codegen, panda --watch, or the project build that triggers PostCSS.

Decision Rules

• Read installation.md before touching framework-specific setup, CSS entrypoints, or package scripts.
• Read styling-foundations.md before changing cascade layers, conditional styles, css composition, global styles, or JSX style context helpers.
• Read patterns-recipes-and-responsive.md before choosing between cva, config recipes, slot recipes, or responsive variants.
• Read jsx-style-props-and-writing-styles.md before editing JSX style props, styled, template literals, or nested authored styles.
• Read theming-and-tokens.md before extending tokens, semantic tokens, text styles, layer styles, or animation styles.
• Read guides-and-troubleshooting.md first when styles are missing, HMR or absolute imports break extraction, runtime values are involved, or the task is packaging a component library.
• Read cli-and-config.md before editing panda.config.*, changing CLI flags, or reasoning about what Panda will emit.