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

<Steps>

### Create Gatsby project

To get started, we will need to create a new Gatsby project. We will name our project `test-app` but you can name it
whatever you want.

If you don't enter any parameter, the CLI will guide you through the process of creating a new Gatsby app.

```bash
npm init gatsby
```

You will be asked a few questions, answer them as follows:

```
✔ What would you like to call your site? ... My Gatsby Site
✔ What would you like to name the folder where your site will be created? ... projects/ test-app
✔ Will you be using JavaScript or TypeScript? ... TypeScript
✔ Will you be using a CMS? ... No (or I'll add it later)
✔ Would you like to install a styling system? ... No (or I'll add it later)
✔ Would you like to install additional features with other plugins? ... No items were selected
```

Enter the newly created directory:

```bash
cd test-app
```

### Install Bamboo CSS

Install Bamboo CSS and `gatsby-plugin-postcss` to your project. After that run the `bamboo init` command to setup Bamboo
CSS in your project.

```bash
npm install -D @bamboocss/dev postcss gatsby-plugin-postcss
npx bamboo init --postcss
```

### Setup the Gatsby PostCSS plugin

Include the plugin in your `gatsby-config.ts` file. Check out the
[official documentation](https://www.gatsbyjs.com/plugins/gatsby-plugin-postcss/) for more information.

```ts {9} filename="gatsby-config.ts"
import type { GatsbyConfig } from 'gatsby'

const config: GatsbyConfig = {
  siteMetadata: {
    title: `My Gatsby Site`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  graphqlTypegen: true,
  plugins: [`gatsby-plugin-postcss`],
}

export default config
```

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

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

> If you use [GraphQL Typegen](https://www.gatsbyjs.com/docs/how-to/local-development/graphql-typegen/), you'll need to
> update the `include` to avoid infinite loop due to generated `src/gatsby-types.d.ts`.

```js {6} filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  preflight: true,
  // Where to look for your css declarations
  include: ['./src/pages/**/*.{js,jsx,ts,tsx}', './src/components/**/*.{js,jsx,ts,tsx}'],
  exclude: [],
  outdir: 'styled-system',
})
```

### Configure the entry CSS with layers

Create `src/styles/index.css` file and add the following content:

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

### Import the entry CSS

Create a `gatsby-browser.ts` file in the root of your project and add the following content:

```ts filename="gatsby-browser.ts"
import './src/styles/index.css'
```

### Start your build process

Run the following command to start your development server.

```bash
npm run develop
```

### Start using Bamboo

```tsx {1} filename="src/pages/index.tsx"
import { css } from '../../styled-system/css'

const IndexPage = () => <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</div>

export default IndexPage
```

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