Using Next.js

Setting up Panda CSS with Next.js is straightforward. Follow the steps below to get started.

If you don't have Next.js app installed, you can follow the Create a Next.js app section to create a new Next.js app, otherwise you can skip to the Install Panda CSS section.

Troubleshooting

I don't see any styles after restarting the dev server

Save your CSS entry file once. That re-triggers the build and the styles come back.

This only happens across a cold restart, and it is Next.js's persistent filesystem cache (.next/cache) holding the previous CSS, not Panda failing to invalidate. While the dev server is running, the PostCSS plugin emits dir-dependency messages for your source directories, so styles refresh normally as you edit.

Reach for rm -rf .next only when a single save doesn't clear it. Wiring it into your dev script forces a full rebuild on every start, which costs far more time than the stale styles it works around.

If you hit this often, or your app is large enough that the rebuild hurts, skip the PostCSS cache entirely: run the CLI in watch mode and import the stylesheet it generates.

{
  "scripts": {
    "dev": "concurrently \"panda --watch\" \"next dev\""
  }
}

import '../styled-system/styles.css'

The CLI watches the filesystem directly, so nothing rides Next's cache and there is nothing to go stale. Remove @pandacss/dev/postcss from your postcss.config.mjs when you switch, otherwise both paths emit CSS.

Tracking upstream:

• vercel/next.js#39410 (opens in a new tab)
• vercel/next.js#48748 (opens in a new tab)
• vercel/next.js#47533 (opens in a new tab)

I don't see any import autocomplete in my IDE

If you're not getting import autocomplete in your IDE, you may need to include the styled-system directory in your tsconfig.json file:

{
  // ...
  "include": ["src", "styled-system"]
}

Codegen fails using es5

If you run into any error related to "Transforming const to the configured target environment ("es5") is not supported yet", update your tsconfig to use es6 or higher:

{
  "compilerOptions": {
    "target": "es6"
  }
}