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.
Install and Configure Panda
Qwik provies an official script that installs panda and configures it for you.
Start your build process
Run the following command to start your development server.
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"]
}