Getting Started

Using PostCSS

Installing Panda as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

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 and autoprefixer 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'
})

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