Panda 🐼: Empowering 🏋️Styling Primitives for Atomic CSS and Readable Recipes 🍲

Getting your hands dirty with Panda-CSS

Panda is a powerful styling engine that simplifies the process of authoring atomic CSS and readable recipes. By combining the developer experience of CSS-in-JS with the performance of atomic CSS, Panda offers a streamlined approach to styling. Through static analysis of JavaScript and TypeScript files, Panda generates styles on-demand, resulting in a type-safe and readable coding experience.

Table of Content

We’ll be looking into summary of these steps as highlighted in their docs with a little insight.

1. Installation guide.
2. Configuration guide
3. Framework guide.
4. Conclusion
5. Reference

1. Installation

There are two major ways of installing Panda-CSS in your project which are;

• Panda CLI
• Post CSS

Panda CLI:

The quickest way to use Panda from scratch is by using the Panda CLI tool.
Using pnpm

pnpm install -D @pandacss/dev
pnpm panda init

Using npm

npm install -D @pandacss/dev
npx panda init

Using Yarn

yarn add -D @pandacss/dev
yarn panda init

Post CSS

To seamlessly integrate Panda with build tools like webpack, Rollup, Vite, and Parcel, the recommended approach is to install it as a PostCSS plugin.
Install panda and create your panda.config.ts file.

Using pnpm

pnpm install -D @pandacss/dev postcss
pnpm panda init -p

Using npm

npm install -D @pandacss/dev postcss
npx panda init -p

Using yarn

yarn add -D @pandacss/dev postcss
yarn panda init -p

2. Configuration guide:

Configuration for panda CLI

Specify the file paths of your JavaScript or TypeScript code where you plan to utilize Panda.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})

Import the generated CSS

After each Panda run, the generated CSS is exported to the styled-system/styles.css file. Import this file into the root component of your project.

import './styled-system/styles.css'
 
export function App() {
  return <div>Page</div>
}

Start the Panda build process

Execute the CLI tool to scan your JavaScript and TypeScript files, searching for style properties and call expressions.
Using pnpm

# Run it once
pnpm panda
 
# Run it in watch mode
pnpm panda --watch

Using npm

# Run it once
npx panda
 
# Run it in watch mode
npx panda --watch

Using yarn

# Run it once
yarn panda
 
# Run it in watch mode
yarn panda --watch

Configuration for Post CSS

Add Panda to your PostCSS config

Add panda and autoprefixer to your postcss.config.cjs file, or wherever PostCSS is configured in your project.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {}
  }
}

Configure the content.

Include your Panda configuration in the panda.config.js file or in the designated configuration file for Panda within your project.

import { defineConfig } from '@pandacss/dev'
 
export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{tsx,jsx}', './pages/**/*.{jsx,tsx}'],
  exclude: [],
  outdir: 'styled-system'
})

Configure the entry CSS with layers

Add the provided code to an index.css file and import it in the root component of your project.

@layer reset, base, tokens, recipes, utilities;

Start your build process

Initiate your build process by running the command specified in your package.json file, typically npm run dev.

Using pnpm

pnpm dev

Using npm

npm run dev

Using yarn

yarn dev

I decided this would be a series of two parts in which in my next article I’ll be talking about the:

• Core Concepts and key features of panda css.
• Writing Styles.
• Layers
• Performance
• Developer Experience

This is going to be fun. You don’t want to miss it.

Frameworks that support Panda-CSS

• Nextjs
• Gatsby.
• PReact.
• Svelte.
• Astrojs.
• Vite.
• Storybook.
• Remix.
• Qwik.
• Solid

3. Using Panda CSS with Next.js

Now let’s setup Panda-CSS with Nextjs using App Router

You can refer to the document if you want to setup for Pages Router.

Create Nextjs App

We have to create our next js app in the already created folder for our project. We can make reference to Nextjs Documentation on how to do that.

Afterwards we can now navigate to our nextjs folder created using this CLI command.

cd test-app

Installing Panda-CSS in your Nextjs App

We’ll be using the npm package manager for this installation guide mostly because it’s the most widely used package manager. For other package managers reference you can check the docs.

Using npm
The code below allows you to install Panda-CSS in your dev dependencies. Panda init --postcss will create a postcss.config.js file at the root of your project.

npm install -D @pandacss/dev
npx panda init --postcss

This is what your postcss.config.js file would look like below.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
  },
}

For advanced configuration follow the Next.js PostCSS guide to set up a custom PostCSS configuration by referring to this link.

Update package.json scripts

Next step requires you to open your package.json file and update the scripts as shown below.

{
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

This code will run codegen after dependency installation. In the Panda codegen you have some perks which allows you generate a new css utilities for your project based on the configuraion file.

Read more about codegen here. It’s important to check that out as it’ll give you insight on how to debug in Panda-CSS.

Configure your content

Make sure that all of the paths of your React components are included in the include section of the panda.config.ts file.

import { defineConfig } from "@pandacss/dev"
 
export default defineConfig({
// Whether to use css reset
preflight: true,
 
// Where to look for your css declarations
include: ["./src/components/**/*.{tsx,jsx}", "./src/app/**/*.{tsx,jsx}"],
 
// Files to exclude
exclude: [],
 
// The output directory for your css system
outdir: "styled-system",
})

Configure the entry CSS with layers

In your Next.js project, navigate to the src/app folder and open global.css file. Replace all the content with the following code:

   @layer reset, base, tokens, recipes, utilities;

Afterwards you can remove the page.module.css file as we don’t need it anymore.

Import the entry CSS in your app

Make sure that you import the global.css file in your src/app/layout.tsx file as shown below:

  import './globals.css'
  import { Inter } from 'next/font/google'
 
  const inter = Inter({ subsets: ['latin'] })
 
  export const metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
  }
 
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    )
  }

Start using Panda

We will update the contents of src/app/page.tsx with the following snippet that uses Panda CSS:

  import { css } from '../../styled-system/css';
 
  export default function Home() {
    return (
      <div className={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello 🐼!</div>
    )
  }

Start the development server

Run the following command to start the development server using npm:

npm run dev

Troubleshooting

Sometimes Next.js caches PostCSS generated styles and 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",
  },
}

4. Conclusion:

I’m really excited about Panda-CSS because of it’s CSS-in-JS that encourages performance , developer experience and composure. With a type-safe runtime API.

It’s been a long haul so far. The installation process is pretty decent in my honest opinion. It’s not as seamless as possible yet. I believe the Panda-CSS team would be doing more to improve this product overtime. Why I think it’s not seamless is because of the constant navigation and changing of files as little mistakes missed could take time to debug which isn’t great for developer experience.

In my concluding series of this article I’ll be highlighting the core features and concepts on Panda-CSS.

We’ll be looking into the writing styles of Panda-CSS and how this product improves performance and build time of our projects.

I’m as excited as you’re. Trust me.

5. Reference:

https://panda-css.com/

Find this article resourceful? Drop a like and comment.

Gracias 🙏

! important

Happy Coding 🤖💻!