Want to skip the docs? Check out pandamastery.com - the best way to learn Panda CSS

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
pnpm panda init --postcss

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 wherever 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 the layer css code to the src/index.css file

src/index.css
@layer reset, base, tokens, recipes, utilities;

Then, import the src/index.css file in your page or layout file

src/pages/index.astro
---
import '../index.css';
---

Update the postcss config

Astro requires a little change for the postcss.config.[c]js:

postcss.config.js
module.exports = {
-  plugins: {
-   '@pandacss/dev/postcss': {}
-  }
+  plugins: [require('@pandacss/dev/postcss')()]
}

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"]
}
PostCSSAngular