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

Sometimes Next.js caches PostCSS generated styles and when that happens you need to clear the cache. To do that, delete the .next folder and restart your development server.

You can also update you package.json scripts to delete the .next folder before each build:

{
"scripts": {
-    "dev": "next dev",
+    "dev": "rm -rf .next && next dev",
},
}

This is a known issue with Next.js and you can track the progress here:

• 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"
  }
}