NextJS顺风CSS问题 ---`shadow-[inset_10px_-50px_94px_0_rgb(199,`类不存在)

Question

我的 next.js 应用程序抛出此 css 错误

语法错误：C:....styles\globals.css

shadow-[inset_10px_-50px_94px_0_rgb(199,

类不存在。如果

shadow-[inset_10px_-50px_94px_0_rgb(199,

是自定义类，请确保它是在

@layer

指令中定义的。 (111:5)

109 | 110 | 110 .copy_btn {

111 | @apply w-7 h-7 rounded-full bg-white/10shadow-[inset_10px_-50px_94px_0_rgb(199, 199, 199, 0.2)] 背景模糊弹性对齐中心项目中心光标指针； | ^ 112 | 112 } 113 | 113 -- 内部错误 -- 语法错误：C:....styles\globals.css

shadow-[inset_10px_-50px_94px_0_rgb(199,

类不存在。如果

shadow-[inset_10px_-50px_94px_0_rgb(199,

是自定义类，请确保它是在

@layer

指令中定义的。 (111:5)

109 | 110 | 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)] 背景模糊弯曲对齐中心项目中心光标指针； | ^ 112 | 112 } 113 |

我希望这个问题得到解决

Answer 1

Tailwind 似乎无法处理提供的类。

这主要是因为您在设置

rgb()

值时添加了空格。

它会混淆顺风并将

shadow-[inset_10px_-50px_94px_0_rgb(199,

、

199,

和

0.2)]

视为单独的类别。

为了避免这种情况，可以使用下划线。请遵循此文档

或者在这种情况下只需删除空格即可。

shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)]