Unable to Customize rippleui components

[stevebrainng]

Describe the bug I was trying to customize the components to use Tailwind's utility classes instead, and I kept receiving errors from vite

example is that I wanted to customize the button to some like this in a custom button.css import

.btn {
    @apply inline-flex
    items-center;

    &:not(.btn-outline) {
        @apply hover:ring-offset-2
        hover:ring-accent
        hover:ring-1
        hover:ring-offset-primary;
    }

    &[processing] {
        @apply opacity-50
        cursor-not-allowed
        pointer-events-none;
    }

    &[processing] .spinner {
        @apply block;
    }
}

I got the following errors:

 [plugin:vite:css] [postcss] C:\laragon\www\new_interview_app\resources\css\button.css:2:5: 
The `&:not(.btn-outline)` class does not exist. If `&:not(.btn-outline)`
 is a custom class, make sure it is defined within a `@layer` directive.`