Sage 10 - Tailwind Purge CSS Question

[grzesiek1owline]

Hi, i have a problem with production version of my css. I have a small onepage site, and my production app.css is very big ~ 500kb. I find many unused lines in this file, example:

    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-200 {
        --tw-text-opacity: 1;
        color: rgba(221, 214, 254, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-300 {
        --tw-text-opacity: 1;
        color: rgba(196, 181, 253, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-400 {
        --tw-text-opacity: 1;
        color: rgba(167, 139, 250, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-500 {
        --tw-text-opacity: 1;
        color: rgba(139, 92, 246, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-600 {
        --tw-text-opacity: 1;
        color: rgba(124, 58, 237, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-700 {
        --tw-text-opacity: 1;
        color: rgba(109, 40, 217, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-800 {
        --tw-text-opacity: 1;
        color: rgba(91, 33, 182, var(--tw-text-opacity))
    }
    .footer-menu__item-icon>a:hover .xs\:group-hover\:text-purple-900 {
        --tw-text-opacity: 1;
        color: rgba(76, 29, 149, var(--tw-text-opacity))
    }

i have purple color in talwind config, but i dont never used this.

tailwind.config
const colors = require('tailwindcss/colors')

module.exports = {
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.js',
        ],

        options: {
            safelist: ['flex-row-reverse', 'flex-row', 'absolute','w-full','h-full','left-0','top-0','object-cover','object-center','pointer-events-none','opacity-75', 'opacity-40', 'mt-14', 'min-h-full', 'min-w-full', 'h-32', 'w-auto','hover-from-blue-to-white','svg-icon-parent', 'svg-icon-from-blue-to-white'],
            keyframes: true,
            fontFace: true,
        },
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        spinner: (theme) => ({
            default: {
                color: '#dae1e7', // color you want to make the spinner
                size: '1em', // size of the spinner (used for both width and height)
                border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
                speed: '500ms', // the speed at which the spinner should rotate
            },
        }),
        screens: {
            'tiny': '320px',
            'xs': '768px',
            'sm': '992px',
            'md': '1024px',
            'lg': '1280px',
            'xl': '1366px',
            '2xl': '1536px',
            '3xl': '1680px',
            '4xl' : '1920px',
        },
        fontSize: {
            'xs': '.75rem',
            'sm': '.875rem',
            'tiny': '.875rem',
            'base': '1rem',
            'lg': '1.125rem',
            'xl': '1.25rem',
            '2xl': '1.5rem',
            '3xl': '1.875rem',
            '4xl': '2.25rem',
            '5xl': '3rem',
            '6xl': '4rem',
            '7xl': '5rem',
        },
        container: false,
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            black: colors.black,
            white: colors.white,
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            purple: colors.violet,
            pink: colors.pink,
        },
        extend: {
              translate: {
                  120 : "-120%",
              },
            fontFamily: {
                primary: 'DM Sans, Helvetica, Arial, sans-serif',
            },
            colors: {
                blue: {
                    50: '#d2e7ff',
                    100: '#4f6c96',
                    200: '#419cd6',
                    300: '#014596',
                    400: '#003263',
                    500: '#001c55',
                }, orange: {
                    DEFAULT: '#d56321',
                    100: '#d56321',
                }, dark: {
                    100: '#403f3f',
                    200: '#333333',
                    300: '#212529',
                    400: '#000000',
                }, light: {
                    100: '#ffffff',
                    200: '#dfdfdf',
                    300: '#f5f5f5',
                    400: '#dedede',
                    500: '#bcbcbc',
                    600: '#b1a9a9',
                },
            },
        },
    },

    variants: {
        spinner: ['responsive'],
        extend: {
            padding: ['last', 'first'],
            margin: ['last', 'first'],
            backgroundColor: ['last', 'first'],
        },
    },

    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('tailwindcss-spinner')({className: 'spinner', themeKey: 'spinner'}),
    ],
};

Its error? feature? or wrong config?

edit:
ok, if i add all styles in tailwind @layer everything is ok.