installation
vite

Using Vite

Easily use Bamboo with Vite, React and Typescript with our dedicated integration.

This guide will show you how to set up Bamboo CSS in a Vite project using PostCSS.

Start a new project

Create Vite project

To get started, we will need to create a new Vite project using react-ts template.

pnpm create vite test-app --template react-ts
cd test-app
pnpm install

Install Bamboo

Install bamboo and create your bamboo.config.ts file.

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

Update package.json scripts

Open your package.json file and update the scripts section as follows:

package.json

{
  "scripts": {
+    "prepare": "bamboo codegen",
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  }
}
  • "prepare" - script that will run Bamboo CSS CLI codegen before each build. Read more about codegen in the CLI section.
💡

This step ensures that the bamboo output directory is regenerated after each dependency installation. So you can add the output directory to your .gitignore file and not worry about it.

Configure the content

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

bamboo.config.ts

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: [],
 
  // Generates JSX utilities with options of React, Preact, Qwik, Solid, Vue
  jsxFramework: 'react',
 
  // The output directory for your css system
  outdir: 'styled-system',
})

Configure the entry CSS with layers

Add this code to an src/index.css file imported in the root component of your project.

src/index.css

@layer reset, base, tokens, recipes, utilities;
💡

Note: Feel free to remove src/App.css file as we don't need it anymore, and make sure to remove the import from the src/App.tsx file.

Start your build process

Run the following command to start your development server.

pnpm dev

Start using Bamboo

Now you can start using Bamboo CSS in your project. Here is the snippet of code that you can use in your src/App.tsx file.

src/App.tsx

import { css } from '../styled-system/css'
 
function App() {
  return <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</div>
}
 
export default App

Optional: fold static styles at build time

The setup above resolves styles at runtime — css({ color: 'red.300' }) runs on every render and returns a class string. The result is cached, but for a call whose arguments never change that work buys nothing.

@bamboocss/vite removes it. During a production build it rewrites statically-resolvable calls into the string they would have returned:

// you write
export const title = css({ fontSize: 'lg', fontWeight: 'bold' })
 
// the bundle gets
export const title = 'fs_lg fw_bold'
pnpm add -D @bamboocss/vite

vite.config.ts

import { defineConfig } from 'vite'
import bamboocss from '@bamboocss/vite'
 
export default defineConfig({
  plugins: [bamboocss({ transform: true })],
})

This does not replace the PostCSS setup above. The plugin emits no CSS — PostCSS stays responsible for the stylesheet, and the CSS output is identical either way. Only the JavaScript changes. The fold is also off by default; you have to pass transform: true.

Calls that cannot be resolved at build time are left alone and keep working as they do today, so this is safe to add to an existing project. See Source Transformation for exactly what folds, what does not, and why.

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"]
}
Installation
Qwik
Installation
Vue