Using PostCSS

Installing Bamboo as a PostCSS plugin is the recommended way to integrate it with your project.

This guide shows you how to install Bamboo as a PostCSS plugin, which is the recommended way to integrate it with your project.

Install Bamboo

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

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

npm install -D @bamboocss/dev postcss
npx bamboo init -p

yarn add -D @bamboocss/dev postcss
yarn bamboo init -p

bun add -D @bamboocss/dev postcss
bun bamboo init -p

Add Bamboo to your PostCSS config

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

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.

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

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

{
  "scripts": {
+    "prepare": "bamboo codegen",
  }
}

The prepare script will run codegen after dependency installation. 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 entry CSS with layers

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

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

Start your build process

Run your build process by feeding the root css to PostCSS in your preferred way.

postcss -o output.css index.css

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

💡

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.

import { css } from './styled-system/css'
 
export function App() {
  return <div className={css({ bg: 'red.400' })} />
}

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"]
}