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.
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)',