Learn everything about
Chai Builder

Lessons covering everything from layout, styling, typography and more.

Steps to configure your project to work with Chai Builder

Step 1: Install dependencies

npm install tailwindcss @tailwindcss/forms @tailwindcss/aspect-ratio @tailwindcss/typography
npm install @bobthered/tailwindcss-palette-generator
npm install @headlessui/react /* or @healessui/vue as per framework */

Step 2: Update the tailwind.config.js file

const {tailwindcssPaletteGenerator} = require("@bobthered/tailwindcss-palette-generator");
const defaultTheme = require("tailwindcss/defaultTheme");

const colors = tailwindcssPaletteGenerator({
  colors: ["#1896f1", "#db2777"],
  names: ["primary", "secondary"],
colors.primary.DEFAULT = "#1896f1";
colors.secondary.DEFAULT= "#db2777";

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        global: "10px",
      fontFamily: {
        heading: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
        body: ["Source Sans Pro", ...defaultTheme.fontFamily.sans],
      colors: colors
  plugins: [

Step 3: Adding fonts to the project

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;500;600;800;900&display=swap" />

Step 4: Adding heading styles to the project

  h1 *,h2 *,h3 *,h4 *,h5 *,h6 *{
    font-family: "Source Sans Pro",ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Step 5: Adding classes to body tag

<body class="font-body antialiased text-[#41454c] bg-[#FFFFFF] dark:text-[#b3c3d9] dark:bg-[#000000]">