Using Panda CSS with Astro

Install Panda

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

pnpm install -D @pandacss/dev
pnpm panda init

npm install -D @pandacss/dev
npx panda init

yarn add -D @pandacss/dev
yarn panda init

Add Panda to your Astro config

Add panda integration to your astro.config.mjs file.

import { defineConfig } from 'astro/config'
import pandacss from '@pandacss/dev/astro'
 
export default defineConfig({
  // ...
  integrations: [pandacss()]
})

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,
  // define the content to scan 👇🏻
  include: ['./src/**/*.{ts,tsx,js,jsx,astro}', './pages/**/*.{ts,tsx,js,jsx,astro}'],
  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

npm run dev

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