ChaiBuilder Tailwind Config

ChaiBuilder Tailwind Config is a custom Tailwind CSS configuration that allows you to easily import and use Chai Builder UI blocks in your projects.

Customizing the tailwind config

Chai builder uses primary and secondary colors and a few other colors to create a consistent look and feel across the app. Below are the list of configurations that Chai builder uses.

const primary       = "#7A1CAC";
const secondary     = "#AD49E1";
const headingFont   = "Inter";
const bodyFont      = "Inter";
const borderRadius  = "5";
const bgLightMode   = "#fff";
const bgDarkMode    = "#000";
const textDarkMode  = "#FFF";
const textLightMode = "#000";

We use the Tailwind Palette Generator to generate the shades of the primary and secondary colors. You can install it using the following command:

npm install tailwindcss-palette-generator

Update the tailwind config to use the ChaiBuilder Tailwind Config. You can pick the config relevant to your project and add to your config file

// tailwind.config.ts
 
import plugin from "tailwindcss/plugin";
import getPalette from "tailwindcss-palette-generator";
 
const getChaibuilderTailwindTheme = () => {
  const primary = "#7A1CAC";
  const secondary = "#AD49E1";
  const headingFont = "Inter";
  const bodyFont = "Inter";
  const borderRadius = "5";
  const bgLightMode = "#fff";
  const bgDarkMode = "#000";
  const textDarkMode = "#FFF";
  const textLightMode = "#000";
 
  const palette = getPalette([
    { color: primary, name: "primary" },
    { color: secondary, name: "secondary" },
  ]);
 
  const colors = {
    'bg-light': bgLightMode,
    'bg-dark': bgDarkMode,
    'text-dark': textDarkMode,
    'text-light': textLightMode,
  };
 
  return {
    extend: {
      container: {
        center: true,
        padding: "1rem",
        screens: {
          "2xl": "1400px",
        },
      },
      fontFamily: { heading: [headingFont], body: [bodyFont] },
      borderRadius: { DEFAULT: `${!borderRadius ? "0px" : borderRadius}px` },
      colors: {...colors, ...palette}
    },
  };
};
 
const config = {
  darkMode: "class",
  content: {
    files: [
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}"
    ]
  },
  theme: getChaibuilderTailwindTheme(),
  plugins: [
    // optional plugin if you intend to use body background and text colors:
    plugin(function ({ addBase, theme }: any) {
      addBase({
        "h1,h2,h3,h4,h5,h6": {
          fontFamily: theme("fontFamily.heading"),
        },
        body: {
          fontFamily: theme("fontFamily.body"),
          color: theme("colors.text-light"),
          backgroundColor: theme("colors.bg-light"),
        },
        ".dark body": {
          color: theme("colors.text-dark"),
          backgroundColor: theme("colors.bg-dark"),
        },
      });
    })
  ],
};
 
export default config;

Overview Introduction