Chai Builder

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: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/line-clamp"),
  ],
}

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

<style>
  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";
  }
</style>

Step 5: Adding classes to body tag

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