Installation

Using Panda CSS with Astro

Setting up Panda CSS in a Astro project using our dedicated integration.

Setup

Install Panda

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

pnpm install -D @pandacss/dev @pandacss/astro
pnpm 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/astro'
 
export default defineConfig({
  // ...
  integrations: [pandacss()]
})

Update package.json scripts

Open your package.json file and update the scripts section as follows:

{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "astro dev",
    "start": "astro start",
    "build": "astro build",
    "preview": "astro preview"
  }
}

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

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';
---
<div class={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello !</div>

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"]
}
PostCSSNext.js