FAQs

Check that the @layer order is declared and the stylesheet is imported. Without PostCSS, import styled-system/styles.css and run panda (or panda --watch).

Panda needs CSS variables, cascade layers (opens in a new tab), and modern selectors like :where() (opens in a new tab) / :is() (opens in a new tab).

>= 1%
last 1 major version
not dead
Chrome >= 99
Edge >= 99
Firefox >= 97
iOS >= 15.4
Safari >= 15.4
Android >= 115
Opera >= 73

For older browsers:

• Set polyfill: true (or --polyfill) so cascade-layer order works without @layer. See Cascade Layers.
• Add autoprefixer (opens in a new tab) in PostCSS when you need vendor prefixes.
• Transform and filter utilities use @property (Safari 16.4+, Firefox 128+). Set optimize.propertyFallback if you need older engines.

Shorthand and longhand can both emit. Longhands win when they target a more specific side. Panda sorts by property breadth, not source order.

css({ padding: '10px', paddingTop: '20px' })
// → .p_10px { padding: 10px } then .pt_20px { padding-top: 20px }

Path aliases. Set importMap to match your tsconfig paths:

export default defineConfig({
  importMap: '@my-path'
})

Config changes. List files that should reload the context in dependencies:

export default defineConfig({
  dependencies: ['path/to/files/**.ts']
})

No. Regenerate it with panda codegen or panda.

Set jsxFramework so Panda generates JSX helpers. Rename the factory with jsxFactory if you want.

Config recipes emit only the variants you use. Prefer them for shared design-system components.

Atomic recipes (cva) emit every variant. Prefer them when you want styles colocated with the component.

Config recipe:

import { button, type ButtonVariantProps } from '../styled-system/recipes'

Atomic recipe:

import { cva, type RecipeVariantProps } from '../styled-system/css'
 
export type ButtonVariantProps = RecipeVariantProps<typeof buttonStyle>

Split variants from the rest with splitVariantProps:

const [buttonProps, cssProps] = button.splitVariantProps(props)

A small one. CSS is generated at build time; in the browser, css() only resolves class strings. Turn on source transforms and the bundler rewrites static calls to plain class strings at build time, so even that runtime drops out of the bundle.

Use token from styled-system/tokens:

import { token } from '../styled-system/tokens'
 
<div style={{ background: token('colors.blue.200') }} />

You need extend. Without it, your theme or preset replaces the base instead of merging.

For tokens, omit extend only when you want a full override. To keep some defaults, import @pandacss/preset-panda and pick what you need.

Use base, not _base. There is no underscore.

css({ color: { base: 'red.600', _dark: 'white' } })

defineConfig is for the app. It exposes every config key.

definePreset is for shareable presets. It only includes keys that merge into an app config.

Yes, with limits. See Dynamic Styles.

See Design systems.

Panda can't know Vite's final asset URL at extract time. Put backgroundImage on style instead:

import bg from './my-image.png'
 
<p
  className={css({ bg: 'red.300', backgroundRepeat: 'repeat' })}
  style={{ backgroundImage: `url("${bg}")` }}
/>

Set outExtension: 'js'. For Jest, also transform with ts-jest and set allowJs: true in tsconfig.

Raise the TypeScript target:

{
  "compilerOptions": {
    "target": "ES2017"
  }
}

Use staticCss. Avoid wide * lists if you want to keep usage-based CSS. See Optimization.

Yes. Put @media, @container, or @supports keys in the style object:

css({
  '@media (min-width: 10px)': { fontSize: 'xl' },
  '@supports (display: flex)': { color: 'red.300' }
})

Import their CSS into a lower cascade layer, then put that layer before Panda's:

@import url('bootstrap.css') layer(bootstrap);
 
@layer bootstrap, reset, base, tokens, recipes, utilities;

Run panda debug. If that doesn't help, search GitHub issues (opens in a new tab) or ask in Discord (opens in a new tab). Open a minimal reproduction when you file an issue.