Why it says the `hover:` class does not exist. If `hover:` is a custom class, make sure it is defined within a `@layer` directive?

Question

I am new in front-end development, and I try to build new react-tailwindcss project. My project throw error like "The hover: class does not exist. If hover: is a custom class, make sure it is defined within a @layer directive.", any idea?

global.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

Remove space after hover:

There should not be any space before or after : (colon) in hover. IDE generally adds space for formatting which causes this problem.

hover:bg-gray-300

Tip I have same issue save without format on visual studio code ctrl + k then ctrl + shift + s

Answer 2

In my case, I copied and pasted code and there was a colon : after @apply i.e.

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