Panda Css

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.