Colors and Branding

The color system in TailwindCSS is a powerful tool for developers, and we've taken it a step further in our component library! By leveraging TailwindCSS, we've introduced additional custom color classes tailored for consistent branding. These new classes work just like Tailwind's native color classes but are specifically designed for branding and come with full support for shades. Using the built-in color system you can generate both shaded and non-shaded color classes.

Our component library provides a set of custom classes to make integrating these colors into your designs seamless and flexible. Below is the full list of available classes:

TailwindCSS’s color system is enhanced for branding with support for shaded and non-shaded colors. Customize or add new colors via tailwind.config.ts for shades or directly edit CSS variables for non-shaded colors.

Modify Shaded Colors

If you want to modify a color with shades (i.e brand-primary, brand-secondary etc.), you can do it in tailwind.config.ts. For example, to change the primary brand color to #001A6E and secondary brand color to #FFE893, the code is given below:

// Modify colors in tailwind.config.ts
import twShades from 'tw-color-shades';
export default {
  theme: {
    extend: {
      colors: {
        "brand-primary": twShades('#001A6E'),
        "brand-secondary": twShades('#FFE893')
      }
    }
  }
};

Modify Non-shaded Colors

There are some colors like background colors, text colors etc. behave differently in light and dark mode! These colors are shadeless and cannot be handled in the way shown above. For these colors we have use CSS variables! You can modify directly in the CSS file. For example, to change the primary background color in light mode to rgb(253 247 244) and in dark mode to rgb(104 87 82) and default text color in light mode to rgb(42 51 53) and in dark mode to rgb(253 247 244), the code is given below:

/* Modify colors in app.css or app.postcss */
@layer base {
  :root {
    --ui-bg-primary: 253 247 244;
    --ui-text-default: 42 51 53;
  }
  :root.dark {
    --ui-bg-primary: 104 87 82;
    --ui-text-default: 253 247 244;
  }
}

Add Shaded Colors

If you want to add a new class for color with shades, you can do it in the tailwind.config.ts file. For example, let's say, you want to add a new class in the color system named brand-tertiary with the base value #009990. Just follow the below steps:

// Generate new colors in tailwind.config.ts
import twShades from 'tw-color-shades';
export default {
  theme: {
    extend: {
      colors: {
        "brand-tertiary": twShades('#009990')
      }
    }
  }
};

Now you can access this color with bg-brand-tertiary-500 or other shades like bg-brand-tertiary-100 or bg-brand-tertiary-800.

Add Non-shaded Colors

If you want to add a new color that behaves differently in light and dark mode and you do not need "shades" for this colors, you can do this in your CSS file and then generate colors in tailwind.config.ts. To add a new color bg-tertiary in the color system, you can follow the below process:

/* define colors in app.css or app.postcss */
@layer base {
  :root {
    --my-css-var: 233 237 234;
  }
  :root.dark {
    --my-css-var: 114 97 92;
  }
}

// Generate the colors in tailwind.config.ts
import twShades from 'tw-color-shades';
export default {
  theme: {
    extend: {
      backgroundColor: {
        tertiary: twShades("--my-css-var")
      }
    }
  }
};

To remove a color follow the Tailwind CSS way, just set the color to undefined in the tailwind.config.ts.

// Remove colors in tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        "brand-secondary": undefined
      },
      backgroundColor: {
        secondary: undefined
      }
    }
  }
};

This will remove all the brand-secondary color classes and bg-secondary class from the application build!