Panda CSS

Panda CSS is a build-time CSS-in-JS library that combines the developer experience of CSS-in-JS with the performance of atomic CSS. Styles are extracted at build time through PostCSS, so no runtime styling code ships to the browser.

Installation

1. Install Panda CSS as a development dependency:

npm i @pandacss/dev -D

pnpm i @pandacss/dev -D

yarn add @pandacss/dev -D

bun i @pandacss/dev -d

deno add npm:@pandacss/dev -D

2. Initialize Panda CSS in your project. This creates a panda.config.ts file and a postcss.config.cjs file:

npx panda init --postcss

pnpx panda init --postcss

yarn dlx panda init --postcss

bunx panda init --postcss

dpx panda init --postcss

3. Add the prepare script to your package.json, which generates the styled-system directory after installs:

{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "vite",
    "build": "vite build"
  }
}

Configure Panda CSS

Open panda.config.ts and make sure the include patterns match your source files. Setting jsxFramework to "solid" enables Solid-specific JSX style props support:

import { defineConfig } from "@pandacss/dev";

export default defineConfig({
  preflight: true,
  include: ["./src/**/*.{js,jsx,ts,tsx}"],
  exclude: [],
  jsxFramework: "solid",
  outdir: "styled-system",
});

Import the cascade layers

Add the Panda CSS cascade layers to your src/index.css file:

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

Then import your index.css file into the root index.jsx or index.tsx file:

/* @refresh reload */
import { render } from "solid-js/web"
import "./index.css"
import App from "./App"

render(() => <App />, document.getElementById('root') as HTMLElement);

Usage

With Panda CSS set up, use the css function from the generated styled-system directory to style your components:

/* src/App.jsx */
import { css } from "../styled-system/css";

function App() {
  return (
    <div class={css({ fontSize: "2xl", fontWeight: "bold" })}>
      Hello from Panda! 🐼
    </div>
  );
}

export default App;

Support

For additional assistance, refer to the Panda CSS installation guide.