Next.js学习中Tailwind CSS自定义类编译失败求助

• 修复阴影值的空格问题：Tailwind的方括号自定义语法中，空格会被解析为类的分隔符，导致你的阴影值被截断成不完整的shadow-[inset_10px_-50px_94px_0_rgb(199,。把rgb(199, 199, 199, 0.2)里的空格全部去掉，改为rgb(199,199,199,0.2)。

• 将自定义类放入@layer指令：Tailwind需要通过@layer utilities来识别并正确编译自定义工具类，否则会判定这是未定义的类。修改后的完整代码如下：

@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，提问作者Mateusz Minder