Installation

Using Panda CSS with Qwik

Setting up Panda CSS in a Qwik project using PostCSS.

Start a new project

Create Qwik project

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

npx create qwik@latest

Install Panda

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

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

Update package.json scripts

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

package.json
{
  "scripts": {
+    "prepare": "panda codegen",
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
  }
}
  • "prepare" - script that will run Panda CSS CLI codegen before each build. Read more about codegen in the CLI section.
💡

This step ensures that the panda output directory is regenerated after each dependency installation. So you can add the output directory to your .gitignore file and not worry about it.

Configure the content

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

panda.config.ts
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.

src/global.css
@layer reset, base, tokens, recipes, utilities;

Start your build process

Run the following command to start your development server.

npm run dev

Start using Panda

Now you can start using Panda CSS in your project.

src/routes/layout.tsx
import { component$, Slot } from '@builder.io/qwik'
import { routeLoader$ } from '@builder.io/qwik-city'
import { css } from 'styled-system/css'
 
export const useServerTimeLoader = routeLoader$(() => {
  return {
    date: new Date().toISOString(),
  }
})
 
export default component$(() => {
  return (
    <div class={css({ p: '10', bg: 'gray.900', h: 'dvh' })}>
       <Slot />
    </div>
  )
})

Troubleshooting

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

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