i have problem with adding new custom colors to tailwind.config.js.
Few days ago i’ve added some custom colors, and it’s works.
Now i’m trying to add new, and i can’t use it.
That’s my tailwind.config.js:

// /** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
    theme: {
        
        extend: {
            backgroundImage: {
                'gallery-1': "url('/gallery/gallery-1.jpeg')",
                'gallery-2': "url('/gallery/gallery-2.jpeg')",
                'gallery-3': "url('/gallery/gallery-3.jpeg')",
                'gallery-4': "url('/gallery/gallery-4.jpeg')",
                'gallery-5': "url('/gallery/gallery-5.jpeg')",
                'gallery-gradient':
                    'background-image: linear-gradient(180deg, rgba(17, 25, 40, 0) 26.56%, rgba(17, 25, 40, 0.75) 100%);',
            },
            colors: {
                'primary-orange': '#FAAE2B',
                'offer-hov': '#E6EBE9',
                'stat-col': 'rgba(1, 71, 55, 0.05)',
                'custom-light': 'rgba(1, 71, 55, 0.05)',
                'separator': 'rgba(1, 71, 55, 0.1)',
                'icon': 'rgba(222, 247, 236, 0.6)',
                'advantage-number': 'rgba(4, 108, 78, 0.5)›',
                'hero-inactive': 'rgba(1, 71, 55, 0.3)›',
            },
            spacing: {
                hero: '4.625rem', // following the standard of 128 / 4 = 32
            },
            flexBasis: {
                '1/7': '14.2857143%',
                '2/7': '28.5714286%',
                '3/7': '42.8571429%',
                '4/7': '57.1428571%',
                '5/7': '71.4285714%',
                '6/7': '85.7142857%',
            },
            animation: {
                'bounce-one': 'bounce .7s linear',
                scroll: 'scroll 40s linear infinite',
            },
            keyframes: {
                scroll: {
                    '0%': { transform: 'translateX(0)' },
                    '100%': { transform: 'translateX(calc(-64px * 14))' },
                },
            },
        },
    },
    plugins: [require('flowbite/plugin')],

For example if i write "bg-primary-orange" it works, but "bg-hero-inactive" it doesn’t.
I don’t have idea whats heppend than this new custo mcolor "hero-inactive" doesn’t work.

I’ve trying change names, rebuild app but that doesn’t work.

>Solution :

Have you tried remove the › at the end of the color?

'hero-inactive': 'rgba(1, 71, 55, 0.3)›',

to

'hero-inactive': 'rgba(1, 71, 55, 0.3)',