Vamos al archivo de configuración de Tailwind en tu proyecto, ya sea que uses Vite, Next o Remix, no importa.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
      sans: ["Montserrat"],
    },
    extend: {},
  },
  plugins: [],
};

Entramos en la llave extend para no eliminar los defaults del theme, solo agregar más.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
      sans: ["Montserrat"],
    },
    extend: {
      colors: {
        "brand-100": "#635985",
        "brand-200": "#443C68",
        "brand-300": "#393053",
        "brand-400": "#18122B",
      },
    },
  },
  plugins: [],
};

Y agregamos nuestros propios colores, ya sea que uses una escala o que sean nombres independientes, como prefieras.

Así podremos usar nuestros colores en el HTML y además tendremos sugerencias. 🤩

className="bg-brand-100 text-white texy-2xl p-4 dark:bg-brand-300 rounded-lg"