Manual Installation
Step 1: Install the packages
npm install @chaibuilder/sdk @chaibuilder/runtime tailwindcss
Step 2: Add a custom tailwind config.
Create a new file: tailwind.chaibuilder.config.ts
.
Pass the path to your source files.
import { chaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";export default chaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
Step 3: Create a new chaibuilder.tailwind.css
@config "./tailwind.chaibuilder.config.ts";
@tailwind base;@tailwind components;@tailwind utilities;
Step 4: Add the builder to your page.
import "./chaibuilder.tailwind.css";import "@chaibuilder/sdk/styles";import {ChaiBuilderEditor} from "@chaibuilder/sdk";
const BuilderFullPage = () => { return ( <ChaiBuilderEditor blocks={[]} onSavePage={async (blocks) => await saveBlocks(blocks)} onSaveBrandingOptions={async (branding) => await saveBranding(branding)} /> );}
Step 5: Render the blocks on your page.
export default async () => { const styles = await getStylesForBlocks(blocks, brandingOptions); return <> <style>{styles}</style> <RenderChaiBlocks blocks={blocks} /> </>}