A quick lil function to add a radix color scale to your tailwind config

radix-color-scale.tailwind.config.ts

import type { Config } from 'tailwindcss';

const radix_color_scale = (colorName: string) => {
        return {
        DEFAULT: `var(--${colorName}-9)`,
        a1: `var(--${colorName}-a1)`,
        a2: `var(--${colorName}-a2)`,
        a3: `var(--${colorName}-a3)`,
        a4: `var(--${colorName}-a4)`,
        a5: `var(--${colorName}-a5)`,
        a6: `var(--${colorName}-a6)`,
        a7: `var(--${colorName}-a7)`,
        a8: `var(--${colorName}-a8)`,
        a9: `var(--${colorName}-a9)`,
        a10: `var(--${colorName}-a10)`,
        a11: `var(--${colorName}-a11)`,
        a12: `var(--${colorName}-a12)`,
        c1: `var(--${colorName}-1)`,
        c2: `var(--${colorName}-2)`,
        c3: `var(--${colorName}-3)`,
        c4: `var(--${colorName}-4)`,
        c5: `var(--${colorName}-5)`,
        c6: `var(--${colorName}-6)`,
        c7: `var(--${colorName}-7)`,
        c8: `var(--${colorName}-8)`,
        c9: `var(--${colorName}-9)`,
        c10: `var(--${colorName}-10)`,
        c11: `var(--${colorName}-11)`,
        c12: `var(--${colorName}-12)`,
    } as const
}

export default {
    content: ['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                'red': colorStyle('red'),
                'yellow': colorStyle('yellow'),
                'blue': colorStyle('blue'),
                'violet': colorStyle('violet'),
            },
        },
    },
    variants: {},
    plugins: [require('@tailwindcss/typography')],
} satisfies Config;