​
The globals.css

Inside your apps/web/styles, you will have a globals.css with the following value:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* default light theme */
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --primary: 225 74% 57%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 240 10% 3.9%;
    --danger: 0 84.3% 60%;
    --danger-foreground: 0 0% 100%;
    --accent: 240 4.8% 95.9;
    --accent-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.5rem;

    --chart-1: var(--primary);
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }
}

::-moz-selection {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

::selection {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}

All the CSS Variables exposed here uses hsl values. This allows us to change saturation, brightness without having to make changes to the hex code or mapping different levels of saturation in tailwind.config.ts file.

​
Convention

We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color.

The background suffix is omitted when the variable is used for the background color of the component.

Given the following CSS variables:

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

The background color of the following component will be hsl(var(--primary)) and the foreground color will be hsl(var(--primary-foreground)).

<div className="bg-primary text-primary-foreground">Hello</div>

​
Adding new colors

To add new colors, you need to add them to your globals.css and to your packages/tailwind-config/tailwind.config.ts file.

apps/web/globals.css
:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}
packages/tailwind-config/tailwind.config.ts
const config: Config = {
  // rest of file,
  theme: {
    extend: {
      colors: {
        // rest of colors defined
        warning: {
          DEFAULT: 'hsl(var(--warning))',
          foreground: 'hsl(var(--warning-foreground))'
        }
      }
    }
  }
}

export { config };

You can now use warning utility class in your components:

<div className="bg-warning text-warning-foreground" />