---
title: Using Astro
description: Easily use Bamboo with Astro with our dedicated integration.
---

## Setup

<Steps>

### Install Bamboo

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

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

### 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`.

### Configure the content

Add your bamboo config to your `bamboo.config.js` file, or wherever bamboo is configured in your project.

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

export default defineConfig({
  preflight: true,
  // define the content to scan 👇🏻
  include: ['./src/**/*.{ts,tsx,js,jsx,astro}', './pages/**/*.{ts,tsx,js,jsx,astro}'],
  exclude: [],
  outdir: 'styled-system',
})
```

### Configure the entry CSS with layers

Add the layer css code to the `src/index.css` file

```css filename="src/index.css"
@layer reset, base, tokens, recipes, utilities;
```

Then, import the `src/index.css` file in your page or layout file

```md filename="src/pages/index.astro"
---
import '../index.css';
---
```

### Update the postcss config

Astro's Vite pipeline needs the array form of the plugin list. Both forms are equivalent to Bamboo; only Astro cares.

```diff {3} filename="postcss.config.cjs"
module.exports = {
-  plugins: {
-   '@bamboocss/dev/postcss': {}
-  }
+  plugins: [require('@bamboocss/dev/postcss')()]
}
```

### Start your build process

Start the dev server with `pnpm dev`.

### Start using Bamboo

Use the generated style utilities in your code, and bamboo will extract them to the generated CSS file.

```jsx
---
import { css } from '../../styled-system/css';
---
<div class={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello !</div>
```

</Steps>

## Troubleshooting

If your IDE does not autocomplete `styled-system` imports, add that directory to `include` in `tsconfig.json`. See
[the CLI guide](/docs/installation/cli#troubleshooting).
