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