Using PostCSS

Installing Panda as a PostCSS plugin is the recommended way to integrate it with your project.

Install Panda

Install panda and create your panda.config.ts file.

pnpm install -D @pandacss/dev postcss
pnpm panda init -p

Add Panda to your PostCSS config

Add panda to your postcss.config.cjs file, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}

Configure the content

Add your panda config to your panda.config.js file, or wherever panda is configured in your project.

import { defineConfig } from '@pandacss/dev'
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system'

Update package.json scripts

Open your package.json file and update the scripts section as follows:

  "scripts": {
+    "prepare": "panda codegen",

The prepare script will run codegen after dependency installation. Read more about codegen in the CLI section.


This step ensures that the panda output directory is regenerated after each dependency installation. So you can add the output directory to your .gitignore file and not worry about it.

Configure the entry CSS with layers

Add this code to an index.css file which is going to be the root css of your project.

@layer reset, base, tokens, recipes, utilities;

Start your build process

Run your build process by feeding the root css to PostCSS in your preferred way.

postcss -o output.css index.css

If you're using a framework, PostCSS is probably already integrated with your build process. Check our other guides or the documentation of your framework to see how to configure PostCSS.

Start using Panda

Use the generated style utilities in your code and panda will extract them to the generated CSS file.

import { css } from './styled-system/css'
export function App() {
  return <div className={css({ bg: 'red.400' })} />


If you're not getting import autocomplete in your IDE, you may need to include the styled-system directory in your tsconfig.json file:

  // ...
  "include":  ["src", "styled-system"]