References

CLI Reference

You can use the Command-Line Interface (CLI) provided by Panda to develop, build, and preview your project from a terminal window.

`panda init`

Initialize Panda in a project. This process will:

Create a panda.config.ts file in your project with the default settings and presets.
Emit CSS utilities for your project in the specified output directory.

Flags

`--interactive, -i`

Whether to run the interactive mode

`--force, -f`

Whether to overwrite existing files

`--postcss, -p`

Whether to emit a postcss (opens in a new tab) config file

`--config, -c`

Path to Panda config file

Related: config

`--cwd`

Path to current working direcory

`--silent`

Whether to suppress all output

`--no-gitignore`

Whether to update gitignorew with the output directory

`--out-extension`

The extension of the generated js files (default: 'mjs')

Related: config.outExtension

`--jsx-framework`

The jsx framework to use

Related: config.jsxFramework

`--syntax`

The css syntax preference

Related: config.syntax

`--strict-tokens`

Set strictTokens to true

Related: config.strictTokens

`--cpu-prof`

This will generate a panda-{command}-{timestamp}.cpuprofile file in the current working directory, which can be opened in tools like Speedscope (opens in a new tab)

pnpm panda --cpu-prof

Related: Debugging

`--logfile`

Outputs logs to a file

Related: Debugging

`panda`

Run the extract process to generate static CSS from your project.

Flags

`--outdir`

The output directory for the generated CSS utilities

Related: config.outdir

`--minify`

Whether to minify the generated CSS

Related: config.minify

`--watch, -w`

Whether to watch for changes in the project

Related: config.watch

`--poll`

Whether to poll for file changes

Related: config.poll

`--config, -c`

The path to the config file

Related: config

`--cwd`

The current working directory

Related: config.cwd

`--preflight`

Whether to emit the preflight or reset CSS

Related: config.preflight

`--silent`

Whether to suppress all output

Related: config.logLevel

`--exclude, -e`

Files to exclude from the extract process

Related: config

`--clean`

Whether to clean the output directory before emitting

Related: config.clean

`--hash`

Whether to hash the output classnames

Related: config.hash

`--lightningcss`

Use lightningcss instead of postcss for css optimization.

Related: config.lightningcss

`--polyfill`

Polyfill CSS @layers at-rules for older browsers.

Related: config.polyfill

`--emitTokensOnly`

Whether to only emit the tokens directory

Related: config.emitTokensOnly

`--cpu-prof`

This will generate a panda-{command}-{timestamp}.cpuprofile file in the current working directory, which can be opened in tools like Speedscope (opens in a new tab)

pnpm panda --cpu-prof

Related: Debugging

`--logfile`

Outputs logs to a file

`panda codegen`

Generate new CSS utilities for your project based on the configuration file.

Flags

`--silent`

Whether to suppress all output

Related: config.logLevel

`--clean`

Whether to clean the output directory before emitting

Related: config.clean

`--config, -c`

Path to Panda config file

Related: config

`--watch, -w`

Whether to watch for changes in the project

Related: config.watch

`--poll`

Whether to poll for file changes

Related: config.poll

`--cwd`

Current working directory

Related: config.cwd

`--cpu-prof`

This will generate a panda-{command}-{timestamp}.cpuprofile file in the current working directory, which can be opened in tools like Speedscope (opens in a new tab)

pnpm panda --cpu-prof

Related: Debugging

`--logfile`

Outputs logs to a file

Related: Debugging

`panda cssgen`

Generate the CSS from files.

You can use a glob to override the config.include option like this:

panda cssgen "src/**/*.css" --outfile dist.css

or you can use it with a {type} argument to generate only a specific type of CSS:

preflight
tokens
static
global
keyframes

💡

Note that this only works when passing an --outfile.

You can use it like this:

panda cssgen "static" --outfile dist/static.css

Flags

`--outfile`

Output file for extracted css, default to './styled-system/styles.css'

`--silent`

Whether to suppress all output

Related: config.logLevel

`--minify`

Whether to minify the generated CSS

Related: config.minify

`--clean`

Whether to clean the output directory before emitting

Related: config.clean

`--config, -c`

Path to Panda config file

Related: config

`--watch, -w`

Whether to watch for changes in the project

Related: config.watch

`--minimal`

Skip generating CSS for theme tokens, preflight, keyframes, static and global css.

This means that the generated CSS will only contain the CSS related to the styles found in the included files.

💡

Note that you can use a glob to override the config.include option like this: panda cssgen "src/**/*.css" --minimal

This is useful when you want to split your CSS into multiple files, for example if you want to split by pages.

Use it like this:

panda cssgen "src/**/pages/*.css" --minimal --outfile dist/pages.css

`--poll`

Whether to poll for file changes

Related: config.poll

`--cwd`

Current working directory

Related: config.cwd

`--lightningcss`

Use lightningcss instead of postcss for css optimization.

Related: config.lightningcss

`--polyfill`

Polyfill CSS @layers at-rules for older browsers.

Related: config.polyfill

`--cpu-prof`

This will generate a panda-{command}-{timestamp}.cpuprofile file in the current working directory, which can be opened in tools like Speedscope (opens in a new tab)

pnpm panda --cpu-prof

Related: Debugging

`--logfile`

Outputs logs to a file

Related: Debugging

`panda studio`

Realtime documentation for your design tokens.

Flags

`--build`

Build

`--preview`

Preview

`--port`

Use custom port

`--host`

Expose to custom host

`--config, -c`

Path to Panda config file

Related: config

`--cwd`

Current working directory

Related: config.cwd

`--outdir`

Output directory for static files

`panda analyze`

Analyze design token usage in glob.

Flags

`--json [filepath]`

Output analyze report in given JSON filepath

💡

panda analyze --json report.json

`--silent`

Whether to suppress all output

Related: config.logLevel

`--config, -c`

Path to Panda config file

Related: config

`--cwd`

Current working directory

Related: config.cwd

`panda debug`

Debug design token extraction & CSS generated from files in glob.

Flags

`--silent`

Whether to suppress all output

`--dry`

Output debug files in stdout without writing to disk

`--outdir [dir]`

Output directory for debug files, defaults to ../styled-system/debug

`--only-config`

Should only output the config file, default to 'false'

`--config, -c`

Path to Panda config file

Related: config

`--cwd`

Current working directory

Related: config.cwd

`panda emit-pkg`

Emit package.json with entrypoints, can be used to create a workspace package dedicated to the config.outdir, in combination with config.importMap

`--cpu-prof`

This will generate a panda-{command}-{timestamp}.cpuprofile file in the current working directory, which can be opened in tools like Speedscope (opens in a new tab)

pnpm panda --cpu-prof
 
#### `--logfile`
 
Outputs logs to a file
 
### Flags
 
#### `--silent`
 
Whether to suppress all output
 
#### `--outdir`
 
Output directory

Debugging Config