Managing TailwindCSS Colors

All of the colors in your Rails project with Instrumental Components are managed using TailwindCSS.

Instrumental Components installs a specific recommended approach for managing and implement your brand's colors in a consistent and maintainable way:

Objectives

Typically, with TailwindCSS, you would place many differentn color utility classes (such as bg-sky-500, text-emerald-600, border-[#fafafa], etc.) throughout your markup. While this works, it's not very maintainable. What if you decide to change your brand colors from "Emerald" to "Amber"? Then you'd need to find and change each and every instance of those colors throughout your project.

We want to define our brand's colors in a single place (app/assets/tailwind/colors.css) assign those to generic non-color-specific CSS variables. Then, we can use those CSS variables throughout our project.

Theme color variables

Theme color variables are defined in the @theme block in app/assets/tailwind/colors.css. This is done in the @theme block.

The version of colors.css that comes installed with Instrumental Components includes the following variable names:

• primary -- Typically used for links and primary button colors.
• primary-light -- Specifically used for the highlight gradient on primary buttons.
• secondary -- Typically used for secondary button colors and other secondary UI elements.
• gray -- Used for all neutral colors, including background colors, text, borders, etc.

Feel free to define additional color variables as needed.

Color shades

For maximum flexibility, we assign all shades of each color from 50 to 950. In addition, one shade, typically the 500 shade, is assigned without a shade number. This represends the "default" shade for that color.

For example, our "primary" color is typically defined something like this (but the actual color values will be different):

@theme {
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);
  ...
}

This enables us to assign the any specific shade of the primary color to any element using CSS classes such as bg-primary-100 or text-primary-700.

When we want to use our "default" shade of our primary color, we can assign the variable without a number like this: bg-primary or text-primary or border-primary, etc. This will use the 500 shade of our primary color, as defined in our colors.css file.