Panda CSS

Panda generates CSS at build time by reading your source. If it can't read a value it emits no CSS, and you get a class name that does nothing. Most Panda bugs are that one fact.

Read the project before you write. Never guess a token name.

Step 1: read the project

1. Version. @pandacss/dev in the nearest package.json. 1.x is v1, 2.x / -beta is v2. In a monorepo, check the package you're editing, not the root. If it isn't installed, say so and stop.

2. Config. Read panda.config.ts (or .js / .mjs). You need outdir (default styled-system), include, jsxFramework, strictTokens, presets, and designSystem if present.

3. Real names. Token, recipe, and pattern names come from the generated output, not from memory: