Installation

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 wherver 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 that 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 imported in the root component of your project.

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

Start your build process

Run your build process with npm run dev or whatever command is configured in your package.json file.

pnpm dev

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' })} />
}

Troubleshooting

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

tsconfig.json
{
  // ...
  "include":  ["src", "styled-system"]
}
CLIAstro