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.

npm create qwik@latest

Install and Configure Panda

Qwik provies an official script that installs panda and configures it for you.

npm run qwik add pandacss

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