Using Qwik

Easily use Bamboo with Qwik with our dedicated integration.

Learn how to set up Bamboo 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

pnpm create qwik@latest

yarn create qwik

bun create qwik@latest

Install and Configure Bamboo

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

npm run qwik add bamboocss

pnpm qwik add bamboocss

yarn qwik add bamboocss

bun qwik add bamboocss

Start your build process

Run the following command to start your development server.

npm run dev

pnpm dev

yarn dev

bun dev

Start using Bamboo

Now you can start using Bamboo 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"]
}