Using SolidJS

Create Vite project

To get started, we will need to create a new SolidJS project using solidjs/templates/ts template.

pnpm dlx degit solidjs/templates/ts test-app
cd test-app
pnpm install

npx degit solidjs/templates/ts test-app
cd test-app
npm install

yarn dlx degit solidjs/templates/ts test-app
cd test-app
yarn

bunx degit solidjs/templates/ts test-app
cd test-app
bun install

Install Bamboo

Install bamboo and the Vite plugin, then create your bamboo.config.ts file. SolidJS 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.

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

npm install -D @bamboocss/dev @bamboocss/vite
npx 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 SolidJS 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 solidPlugin from 'vite-plugin-solid'
 
export default defineConfig({
  plugins: [bamboocss(), solidPlugin()],
})

Import the virtual stylesheet

Import it once, from the module that renders your app — src/index.tsx in the Vite template:

/* @refresh reload */
import 'virtual:bamboo.css'
import { render } from 'solid-js/web'
 
import App from './App'

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/index.css and its import from your entry module 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 type { Component } from 'solid-js'
import { css } from '../styled-system/css'
 
const App: Component = () => {
  return <div class={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</div>
}
 
export default App