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>

Path to Panda config file

Related: config

--cwd <dir>

Path to current working direcory

--silent

Whether to suppress all output

--no-gitignore

Whether to update gitignorew with the output directory

--no-codegen

Whether to run the codegen process

--out-extension <ext>

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

Related: config.outExtension

--outdir <dir>

The output directory for the generated files

Related: config.outdir

--jsx-framework <framework>

The jsx framework to use

Related: config.jsxFramework

--syntax <syntax>

The css syntax preference

Related: config.syntax

--strict-tokens

Set strictTokens to true

Related: config.strictTokens

--logfile <file>

Outputs logs to a file

Related: Debugging


panda

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

By default it will scan and generate CSS for the entire project depending on your include and exclude options from your config file.

pnpm panda
# You can also scan a specific file or folder
# using the optional glob argument
pnpm panda src/components/Button.tsx
pnpm panda "./src/components/**"

Flags

--outdir, -o [dir]

The output directory for the generated CSS utilities

Related: config.outdir

--minify, -m

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 <path>

The path to the config file

Related: config

--cwd <path>

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>

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 <file>

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>

Path to Panda config file

Related: config

--watch, -w

Whether to watch for changes in the project

Related: config.watch

--poll, -p

Whether to poll for file changes

Related: config.poll

--cwd <path>

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 <file>

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, -o <file>

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

--silent

Whether to suppress all output

Related: config.logLevel

--minify, -m

Whether to minify the generated CSS

Related: config.minify

--clean

Whether to clean the output directory before emitting

Related: config.clean

--config, -c <path>

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, -p

Whether to poll for file changes

Related: config.poll

--cwd <path>

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 <file>

Outputs logs to a file

Related: Debugging

panda studio

Realtime documentation for your design tokens.

Flags

--build

Build

--preview

Preview

--port <port>

Use custom port

--host

Expose to custom host

--config, -c <path>

Path to Panda config file

Related: config

--cwd <path>

Current working directory

Related: config.cwd

--outdir <dir>

Output directory for static files

--base <path>

Base path of project

panda analyze

Analyze design token usage in glob.

By default it will analyze the entire project depending on your include and exclude options from your config file.

pnpm panda analyze
# You can also analyze a specific file or folder
# using the optional glob argument
pnpm panda analyze src/components/Button.tsx
pnpm panda analyze "./src/components/**"

Flags

--outfile <filepath>

Output analyze report in given JSON filepath

💡

panda analyze --outfile report.json

--silent

Whether to suppress all output

Related: config.logLevel

--config, -c <path>

Path to Panda config file

Related: config

--cwd <path>

Current working directory

Related: config.cwd

panda debug

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

More details in Debugging docs.

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>

Path to Panda config file

Related: config

--cwd <path>

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 <file>

Outputs logs to a file

Related: Debugging

panda ship

Ship extract result from files in glob.

By default it will extract from the entire project depending on your include and exclude options from your config file.

pnpm panda ship
# You can also analyze a specific file or folder
# using the optional glob argument
pnpm panda ship src/components/Button.tsx
pnpm panda ship "./src/components/**"

Flags

--outfile <filepath>

Output path for the JSON build info file, default to './styled-system/panda.buildinfo.json'

💡

panda ship --outfile report.json

--silent

Whether to suppress all output

Related: config.logLevel

--minify, -m

Whether to minify the generated JSON

--config, -c <path>

Path to Panda config file

Related: config

--cwd <path>

Current working directory

Related: config.cwd

--watch, -w

Whether to watch for changes in the project

Related: config.watch

--poll, -p

Whether to poll for file changes

Related: config.poll

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

Flags

--outdir <dir>

The output directory for the generated CSS utilities

Related: config.outdir

--base <path>

The base directory of the package.json entrypoints

--silent

Whether to suppress all output

Related: config.logLevel

--cwd <path>

Current working directory

Related: config.cwd