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.

Thich 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