promptopia\styles\globals.css show class does not exist

[cxp-13]

⨯ ./styles/globals.css:111:5
Syntax error: E:\nextjs_project\promptopia\promptopia\styles\globals.css The shadow-[inset_10px_-50px_94px_0_rgb(199, class does not exist. If shadow-[inset_10px_-50px_94px_0_rgb(199, is a custom class, make sure it is defined within a @layer directive.

109 |
110 | .copy_btn {

111 | @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
| ^
112 | }
113 |
⚠ Fast Refresh had to perform a full reload due to a runtime error.

[cxp-13]

Solution steps：

1. Annotate any code related to shadow
2. add this code

@layer utilities {
    .copy_btn {
        @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
    }

    .glassmorphism {
        @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur p-5;
    }
}

[cxp-13]

The latest solution：

.copy_btn {
    /* @apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur flex justify-center items-center cursor-pointer; */
    @apply w-7 h-7 rounded-full bg-white/10 shadow-2xl backdrop-blur flex justify-center items-center cursor-pointer;

}

.glassmorphism {
    /* @apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] backdrop-blur p-5; */
    @apply rounded-xl border border-gray-200 bg-white/20 shadow-2xl backdrop-blur p-5;

}