---
title: Using PostCSS
description: Emit Bamboo's stylesheet from PostCSS, for any bundler without a Bamboo compiler plugin.
---

<Callout type="warning">
  If your project builds with Vite, use [`@bamboocss/vite`](/docs/installation/vite) instead. This plugin emits the
  stylesheet and nothing else: it does not compile source, so `css()` and `cva()` stay runtime calls and the generated
  style engine ships in your client bundle. Both setups render identically, which is what makes the difference easy to
  miss — so Bamboo says so when it finds a Vite config beside your Bamboo config. Pass `{ runtimeStyling: true }` where
  resolving styles at runtime is what you want, and for a Svelte, Vue or Astro project, where components are not files
  the compiler transforms, this page is the right one.
</Callout>

<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 postcss postcss-cli
    pnpm bamboo init -p
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @bamboocss/dev postcss postcss-cli
    npx bamboo init -p
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @bamboocss/dev postcss postcss-cli
    yarn bamboo init -p
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @bamboocss/dev postcss postcss-cli
    bun bamboo init -p
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Add Bamboo to your PostCSS config

Add bamboo to your `postcss.config.cjs` file, or wherever PostCSS is configured in your project.

```js
module.exports = {
  plugins: {
    '@bamboocss/dev/postcss': {},
  },
}
```

### Configure the content

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

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

### Configure the entry CSS with layers

Add this code to an `index.css` file which is going to be the root css of your project.

```css
@layer reset, base, tokens, recipes, utilities;
```

### Start your build process

Run your build process by feeding the [root css](#configure-the-entry-css-with-layers) to PostCSS in your preferred way.

<Tabs items={['CLI', 'JS API']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    postcss -o output.css index.css
    ```
  </Tab>
  <Tab>
    ```js
    const postcss = require("postcss");
    const bamboocss = require("@bamboocss/dev/postcss");
    const fs = require("fs");

    fs.readFile("index.css", (err, css) => {
      postcss([bamboocss])
        .process(css, { from: "index.css", to: "output.css" })
        .then((result) => {
          console.log(result.css);
        });
    });
    ```

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

> If you're using a framework, PostCSS is probably already integrated with your build process. Check our other guides or
> the documentation of your framework to see how to configure PostCSS.

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

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

  </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).
