---
title: Bamboo CLI
description: An alternative way to use Bamboo is by running the Bamboo CLI tool.
---

<Steps>

### Install Bamboo

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm install -D @bamboocss/dev
    pnpm bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @bamboocss/dev
    npx bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @bamboocss/dev
    yarn bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @bamboocss/dev
    bun bamboo init
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Configure the content

Add the paths to all of your JavaScript or TypeScript code where you intend to use bamboo.

```js {5}
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  preflight: true,
  include: ['./src/**/*.{ts,tsx,js,jsx}', './pages/**/*.{ts,tsx,js,jsx}'],
  exclude: [],
  outdir: 'styled-system',
})
```

### Update package.json scripts

Add `"prepare": "bamboo codegen"` to `scripts`. It runs [codegen](/docs/references/cli#codegen) after every dependency
install, so the output directory can stay in `.gitignore`.

### Import the generated CSS

For each Bamboo run, it emits the generated CSS at the `styled-system/styles.css` file path. Import this file at the
root component of your project.

```jsx {1}
import './styled-system/styles.css'

export function App() {
  return <div>Page</div>
}
```

### Start the Bamboo build process

Run the CLI tool to scan your JavaScript and TypeScript files for style properties and call expressions.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    # Run it once
    pnpm bamboo

    # Run it in watch mode
    pnpm bamboo --watch
    ```

  </Tab>
  <Tab>
    ```bash
    # Run it once
    npx bamboo

    # Run it in watch mode
    npx bamboo --watch
    ```

  </Tab>
  <Tab>
    ```bash
    # Run it once
    yarn bamboo

    # Run it in watch mode
    yarn bamboo --watch
    ```

  </Tab>
  <Tab>
    ```bash
    # Run it once
    bun bamboo

    # Run it in watch mode
    bun bamboo --watch
    ```

  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Start using Bamboo

Use the generated style utilities in your code and bamboo will extract them to the generated CSS file. Then run your
build process.

```jsx
import { css } from './styled-system/css'

export function App() {
  return <div className={css({ bg: 'red.400' })} />
}
```

</Steps>

## 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:

```json filename="tsconfig.json"
{
  // ...
  "include": ["src", "styled-system"]
}
```
