In Vite, where to put custom css

I moving an app to Laravel 10, with Laravel-Mix i have added some custom css classes inside the resource/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .line-danger {
        @apply border text-center h-4 bg-red-800 text-white;
    }

    .line-warning {
        @apply border text-center h-4 bg-red-400;
    }

    .line-attention {
        @apply border text-center h-4 bg-yellow-400;
    }

    .line-normal {
        @apply border text-center h-4;
    }

    .route-lancaster {
        @apply border text-center h-4 bg-blue-400;
    }

    .line-waiting {
        @apply border text-center h-4 bg-green-600 text-white font-bold;
    }

    .line-delivered {
        @apply border text-center h-4 bg-blue-400 text-white font-bold;
    }

    .customer-danger {
        @apply border text-center h-4 bg-red-800 text-white font-bold;
    }

    .customer-warning {
        @apply border text-center h-4 bg-red-400 font-bold;
    }

    .customer-attention {
        @apply border text-center h-4 bg-yellow-400 font-bold;
    }

    .customer-normal {
        @apply border text-center h-4 font-bold;
    }
}

This is probably obvious to everyone, but it seems that the @layer directive is not understood by Vite. Where should I put my custom classes?