为什么它说“hover:”类不存在。如果“hover:”是自定义类，请确保它是在“@layer”指令中定义的？

Question

我是前端开发的新手，我尝试构建新的react-tailwindcss项目。我的项目抛出错误，例如“该类hover:不存在。如果hover:是自定义类，请确保它是在@layer指令中定义的。”，有什么想法吗？

全局.css：

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
.icon{
    @apply hidden xl:inline-flex p-2 h-10 w-10 bg-gray-200 rounded-full text-gray-700 
cursor-pointer hover: bg-gray-300; 
}

.inputIcon{
    @apply  flex items-center space-x-1 hover: bg-gray-100
    flex-grow justify-center p-2 rounded-xl cursor-pointer ;
}
}

Answer 1

悬停后删除空间：

悬停时 :（冒号）前后不应有任何空格。IDE 通常会增加格式化空间，从而导致此问题。

hover:bg-gray-300

提示我在 Visual Studio Code 上保存时遇到同样的问题，但没有格式 ctrl + k then ctrl + shift + s

Answer 2

就我而言，我复制并粘贴了代码，并且ie:后面有一个冒号@apply

.toggle-checkbox:checked {
  @apply: bg-primary;      // error due to ':' after @apply
}