Using Qwik

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 Bamboo

Install bamboo and the Vite plugin, then create your bamboo.config.ts file. Qwik builds with Vite, so @bamboocss/vite is the integration: it compiles every css() and cva() call to a literal class string and ships no style engine.

npm install -D @bamboocss/dev @bamboocss/vite
npx bamboo init

pnpm install -D @bamboocss/dev @bamboocss/vite
pnpm bamboo init

yarn add -D @bamboocss/dev @bamboocss/vite
yarn bamboo init

bun add -D @bamboocss/dev @bamboocss/vite
bun bamboo init

Update package.json scripts

Add "prepare": "bamboo codegen" to scripts. It runs codegen after every dependency install, so the output directory can stay in .gitignore.

The build itself no longer needs it. The Vite plugin generates styled-system/ in buildStart, before anything resolves an import of it, so a fresh clone builds without a separate codegen step. Keep the script regardless: tsc and your editor read the generated types without ever running the plugin.

Configure the content

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

import { defineConfig } from '@bamboocss/dev'
 
export default defineConfig({
  // Whether to use css reset
  preflight: true,
 
  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
 
  // Files to exclude
  exclude: [],
 
  // The output directory for your css system
  outdir: 'styled-system',
})

Add the plugin to your Vite config

import bamboocss from '@bamboocss/vite'
import { defineConfig } from 'vite'
import { qwikCity } from '@builder.io/qwik-city/vite'
import { qwikVite } from '@builder.io/qwik/optimizer'
 
export default defineConfig(() => {
  return {
    plugins: [bamboocss(), qwikCity(), qwikVite()],
  }
})

Import the virtual stylesheet

Import it once, from src/root.tsx:

import { component$ } from '@builder.io/qwik'
import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city'
import { RouterHead } from './components/head'
 
import 'virtual:bamboo.css'

There is no postcss.config.cjs entry for Bamboo and no file carrying the @layer statement: the plugin serves the stylesheet as a virtual module that emits its own layer order.

Delete the template's src/global.css and its import from src/root.tsx while you are there. It is not in a cascade layer, so every declaration in it outranks every Bamboo utility — which is the one way this setup goes wrong quietly.

Reference the ambient declaration so TypeScript accepts that import:

/// <reference types="vite/client" />
/// <reference types="@bamboocss/vite/client" />

Start your build process

Start the dev server with pnpm dev.

Start using Bamboo

import { component$, Slot } from '@builder.io/qwik'
import { css } from '../../styled-system/css'
 
export default component$(() => {
  return (
    <div class={css({ p: '10', bg: 'gray.900', h: 'dvh' })}>
      <Slot />
    </div>
  )
})