Using PostCSS

Install Panda

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

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

npm install -D @pandacss/dev postcss
npx panda init -p

yarn add -D @pandacss/dev postcss
yarn panda init -p

bun add -D @pandacss/dev postcss
bun 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.

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

const postcss = require("postcss");
const fs = require("fs");
 
fs.readFile("index.css", (err, css) => {
  postcss()
    .process(css, { from: "index.css", to: "output.css" })
    .then((result) => {
      console.log(result.css);
    });
});

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