tailwind.config = {
        theme: {
            extend: {
                fontFamily: {
                    sans: ['Montserrat', 'sans-serif'],
                },
                colors: {
                    primary: {
                        DEFAULT: 'var(--main-color-one)',
                        light: 'var(--main-color-one)',
                        dark: 'var(--main-color-one)',
                    },
                    primaryTwo: {
                        DEFAULT: 'var(--main-color-two)',
                        light: 'var(--main-color-two)',
                        dark: 'var(--main-color-two)',
                    },
                    primaryThree: {
                        DEFAULT: 'var(--main-color-three)',
                        light: 'var(--main-color-three)',
                        dark: 'var(--main-color-three)',
                    },
                    primaryFour: {
                        DEFAULT: 'var(--main-color-four)',
                        light: 'var(--main-color-four)',
                        dark: 'var(--main-color-four)',
                    },
                    secondary: {
                        DEFAULT: 'var(--secondary-color)',
                        light: 'var(--secondary-color)',
                        dark: 'var(--secondary-color)',
                    },
                    secondaryTwo: {
                        DEFAULT: 'var(--secondary-color-two)',
                        light: 'var(--secondary-color-two)',
                        dark: 'var(--secondary-color-two)',
                    },
                    sectionBg: {
                        DEFAULT: 'var(--section-bg-1)',
                        light: 'var(--section-bg-1)',
                        dark: 'var(--section-bg-1)',
                    },
                    sectionBgTwo: {
                        DEFAULT: 'var(--section-bg-2)',
                        light: 'var(--section-bg-2)',
                        dark: 'var(--section-bg-2)',
                    },
                    sectionBgThree: {
                        DEFAULT: 'var(--section-bg-3)',
                        light: 'var(--section-bg-3)',
                        dark: 'var(--section-bg-3)',
                    },
                    sectionBgFour: {
                        DEFAULT: 'var(--section-bg-4)',
                        light: 'var(--section-bg-4)',
                        dark: 'var(--section-bg-4)',
                    },
                    sectionBgFive: {
                        DEFAULT: 'var(--section-bg-5)',
                        light: 'var(--section-bg-5)',
                        dark: 'var(--section-bg-5)',
                    },
                    sectionBgSix: {
                        DEFAULT: 'var(--section-bg-6)',
                        light: 'var(--section-bg-6)',
                        dark: 'var(--section-bg-6)',
                    },
                    breadcrumbBg: {
                        DEFAULT: 'var(--breadcrumb-bg)',
                        light: 'var(--breadcrumb-bg)',
                        dark: 'var(--breadcrumb-bg)',
                    },
                    feedbackBg: {
                        DEFAULT: 'var(--feedback-bg-item)',
                        light: 'var(--feedback-bg-item)',
                        dark: 'var(--feedback-bg-item)',
                    },
                    headingBg: {
                        DEFAULT: 'var(--heading-color)',
                        light: 'var(--heading-color)',
                        dark: 'var(--heading-color)',
                    },
                    bodyBg: {
                        DEFAULT: 'var(--body-color)',
                        light: 'var(--body-color)',
                        dark: 'var(--body-color)',
                    },
                    reviewBg: {
                        DEFAULT: 'var(--review-color)',
                        light: 'var(--review-color)',
                        dark: 'var(--review-color)',
                    },
                },
            },
        },
        variants: {
            extend: {
                display: ['peer-checked', 'peer-hover'],
                opacity: ['peer-checked', 'peer-hover'],
                scale: ['peer-checked', 'peer-hover'],
                borderColor: ['peer-checked'],
            },
        },
        // safelist: [
        //     {
        //         pattern: '/group-hover\/product-\d+:*/',
        //     },
        //     {
        //         pattern: '/group\/product-\d+/',
        //     },
        // ],
    }