Using Panda CSS with Preact

Create Vite project

To get started, we will need to create a new Preact project using typescript template.

npx preact-cli create typescript test-app
cd test-app

npx preact-cli create typescript test-app --yarn
cd test-app

Install Panda

Install panda and create your panda.config.ts file.

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

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

Update package.json scripts

Open your package.json file and update the scripts section as follows:

{
  "scripts": {
+    "prepare": "panda codegen",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact build",
    "serve": "sirv build --cors --single",
    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider preact watch",
    "lint": "eslint src",
    "test": "jest"
  }
}

• "prepare" - script that will run Panda CSS CLI codegen before each build. Read more about codegen in the CLI section.

Configure the content

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

import { defineConfig } from "@pandacss/dev"
 
export default defineConfig({
 preflight: true,
 // Where to look for your css declarations
 include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
 exclude: [],
 outdir: "styled-system",
})

Configure the entry CSS with layers

Add this code to an src/style/index.css file imported in the root component of your project.

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

Start your build process

Run the following command to start your development server.

npm run dev

yarn dev

Start using Panda

Now you can start using Panda CSS in your project. Here is the snippet of code that you can use in your src/routes/home/index.tsx file.

import { h } from 'preact';
import { css } from '../../../styled-system/css';
 
const Home = () => {
	return (
		<div class={css({ fontSize: "2xl", fontWeight: 'bold', pt: '56px' })}>Hello 🐼!</div>
	);
};
 
export default Home;