How Panda CSS Generates Styles at Build Time

Updated

Panda CSS generates styles during your build step: it scans your source files for style usage, resolves your design tokens and recipes, and emits static CSS files. The browser then loads plain CSS — no style computation runs at runtime. This is what the site means by "Styles generated at build time" and "Zero runtime." The approach applies to any project that has a build step and can run the @pandacss/dev CLI; it is not a drop-in for environments where styles must be created dynamically at runtime from arbitrary values.

The build-time pipeline

The site describes the core loop in three parts: you write type-safe styles, Panda generates styles at build time, and the output is static CSS. Concretely:

  1. You author styles in code. The homepage shows three authoring styles that all feed the same pipeline:

    • Style functions — css({ mt: "4", fontSize: "xl" }) imported from ./styled-system/css
    • Style props / JSX components — <Stack direction="row" p="4"> and <Box mt="4"> from ./styled-system/jsx
    • Recipes — cva({ base: {...}, variants: { status: {...} } }) from ./styled-system/css, wrapped with styled('span', badge)

  2. Panda scans and extracts. The build process reads your source files, finds these calls, and maps the values ("4", "xl", "gray.600") through your design tokens and configuration.

  3. Panda emits static CSS. The resolved rules are written out as CSS files. The styled-system directory referenced in the imports is the generated output you import from — it is produced by the tool, not written by hand.

The install command shown on the site is:

npm i -D @pandacss/dev

It is a dev dependency, which is consistent with a build-time tool: it runs in your build, not in your shipped app.

Why "zero runtime" matters

In a runtime CSS-in-JS library, style objects are evaluated in the browser (or on the server per request), and CSS is injected into the document while the app runs. Panda moves that work earlier:

Aspect Runtime CSS-in-JS Panda CSS (build time)
When styles are computed At runtime, per render/request Once, during the build
What ships to the browser Library + style logic + injected CSS Static CSS files
Client-side style work Yes None ("Zero runtime")
Output Injected at runtime Static CSS generated at build time

The practical consequence: the browser receives finished CSS instead of code that produces CSS. That removes a class of client-side work and makes the styling output inspectable as ordinary CSS files.

RSC and SSR compatibility

The site states Panda is "RSC compatible" and "Works Everywhere. Including Server Components." This follows from the mechanism: because styles are resolved at build time into static CSS, rendering a component does not require a runtime style engine. Server Components can reference the generated classes without shipping style-computation code to the client, and SSR does not need to serialize a style cache per request.

What you get alongside the build step

The homepage lists these as part of the same system: TypeScript-based style props, design tokens, cascade layers, utility classes, recipes, Just-in-Time generation, and multi-variant support. These are inputs to or features of the build-time generation, not separate runtime features. The "Just-in-Time" label refers to generating only the styles your code actually uses during the build scan.

When this approach fits — and when it doesn't

Fits when:

  • Your project has a build step where @pandacss/dev can run.
  • You want static CSS output and no runtime style computation.
  • You use React Server Components or SSR and want styling that does not depend on a runtime engine.
  • You want type-safe style authoring with tokens, variants, and recipes.

Doesn't fit when:

  • Styles must be derived from values only known at runtime (for example, user-supplied arbitrary values not present at build time). Build-time extraction cannot see values that don't exist in source.
  • There is no build step to run the generator.

Verifying it worked

After running the build, check that:

  • A styled-system directory exists with the css and jsx entry points your imports reference.
  • Static CSS files are emitted as build output.
  • Your components render with the expected classes, and no runtime style injection appears in the browser.

If styles are missing, the usual cause is that the source file containing the style call wasn't included in the scan — the value never entered the pipeline, so no CSS was generated for it.

For setup specifics and configuration options, the site points to its Get Started and Guides sections, and notes an official course at pandamastery.com for learning Panda CSS v2.