Tailwind with chroma-js custom color shades

tailwind.config.js

import type { Config } from 'tailwindcss';
import plugin from 'tailwindcss/plugin';
import chroma from 'chroma-js';

const domainScale = [100, 200, 300, 400, 500, 600, 700, 800, 900];

function generateShadesInverted(baseColor, steps = 9) {
	const scale = chroma
		.scale(['white', baseColor, 'black'])
		.domain([0, 0.65, 1])
		.padding([0.2, 0.2])
		.correctLightness()
		.mode('oklch')
		.classes(steps)
		.colors(steps);

	return scale.reduce((acc, color, index) => {
		acc[domainScale[index]] = color;
		return acc;
	}, {});
}

const primaryColorShades = generateShadesInverted('#f0f0f0');
const secondaryColorShades = generateShadesInverted('#394151');
const tertiaryColorShades = generateShadesInverted('#ffd65f');
const accentColorShades = generateShadesInverted('#59738c');
const baseColorShades = generateShadesInverted('#dacf9e');

// console.log(primaryColorShades);

export default {
	content: {
		files: ['./src/**/*.{html,js,svelte,ts}'],
		extract
	},
	theme: {
		screens,
		fontSize,
		extend: {
			colors: {
				primary: {
					DEFAULT: '#f0f0f0',
					...primaryColorShades
				},
				secondary: {
					DEFAULT: '#394151',
					...secondaryColorShades
				},
				tertiary: {
					DEFAULT: '#ffd65f',
					...tertiaryColorShades
				},
				accent: {
					DEFAULT: '#59738c',
					...accentColorShades
				},
				base: {
					DEFAULT: '#dacf9e',
					...baseColorShades
				}
			}
		}
	},
} satisfies Config;