Using Astro
Easily use Panda with Astro with our dedicated integration.
This guide will show you how to set up Panda CSS in an Astro project using the @pandacss/vite plugin.
Prefer PostCSS? Run panda init --postcss instead of the plugin step below and follow
Using PostCSS. Everything else on this page stays the same.
Start a new project
Create Astro project
To get started, create a new Astro project:
Install Panda
Install panda, the Vite plugin, and create your panda.config.ts file.
Add the Vite plugin
Astro runs on Vite, so the plugin goes in the vite section of your Astro config. It generates the styled-system
folder, injects the CSS, and keeps both up to date on save. No separate watcher needed.
astro.config.mjs
import pandacss from '@pandacss/vite'
import { defineConfig } from 'astro/config'
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [pandacss()]
}
})Update package.json scripts
Open your package.json file and update the scripts section as follows:
package.json
{
"scripts": {
+ "prepare": "panda codegen",
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview"
}
}The plugin only runs with Vite. The "prepare" script covers type checking and your editor, which read
styled-system before Vite starts, and lets the folder stay gitignored.
Configure the content
Make sure your .astro files and any framework components are included in the include section of the
panda.config.ts file.
panda.config.ts
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
// Whether to use css reset
preflight: true,
// Where to look for your css declarations
include: ['./src/**/*.{js,jsx,ts,tsx,astro}'],
// Files to exclude
exclude: [],
// The output directory for your css system
outdir: 'styled-system'
})Configure CSS layers
Create an src/index.css file with the layer order, and import it in your layout:
src/index.css
@layer reset, base, tokens, recipes, utilities;src/layouts/Layout.astro
---
import '../index.css'
---
<slot />This file only sets the layer order. The plugin injects the generated CSS for you.
Start your build process
Run the following command to start your development server.
Start using Panda
Use the generated style utilities in your .astro files, and panda will extract them at build time.
src/pages/index.astro
---
import { css } from '../../styled-system/css'
---
<div class={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🐼!</div>Optional: drop the styling runtime
By default css() resolves class strings in the browser with a small runtime. Turn on source transforms and the
plugin rewrites static calls to plain class strings at build time, so the runtime never ships:
astro.config.mjs
vite: {
plugins: [pandacss({ transform: true })]
}Dynamic values keep their runtime form. See Source transforms.
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"]
}