Installing Panda CSS

We'll go through the step-by-step process of installing and initializing Panda CSS in a React project created with Vite.

Create a React project with Vite

• Install Vite using the command pnpm create vite
• Name the project "panda-react"
• Select React as the framework and TypeScript for better type safety

Install Panda CSS

• In your terminal, run pnpm add -D @pandacss/dev to install Panda CSS

Initialize the PostCSS plugin for Panda

• Run pnpm panda init --postcss to initialize the PostCSS plugin.
• This creates a postcss.config file and a panda.config file.
• It also creates a "styled-system" directory, which we'll touch on later.

Add the Layer CSS snippet

In a global css file, add the cascade layer snippet required for Panda to work

In most cases, it's the index.css or global.css file

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

Set up a "prepare" script

In your package.json file, add the following "prepare" script:

"prepare": "panda codegen --clean"

This ensures the "styled-system" folder exists in CI environments like GitHub Actions.