NextJS项目Tailwind CSS报错：shadow自定义类不存在问题求解

问题核心 #

错误源于自定义阴影的语法不符合Tailwind CSS规则，若为自定义工具类，还需让Tailwind通过@layer识别它。

解决方案 #

1. 修正自定义阴影的颜色语法 #

Tailwind在自定义方括号类（如shadow-[...]）中，RGB颜色必须用空格分隔通道值，透明度用**斜杠/**分隔，且斜杠要转义为_/（避免被解析为参数分隔符）。修改后代码：

.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;
}

2. 用@layer包裹自定义类（语法修正后仍报错时使用） #

将.copy_btn类放入@layer utilities中，让Tailwind将其视为官方工具类的扩展：

@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;
    }
}

内容的提问来源于stack exchange，提问作者varunkasyap