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

Admin 1
Viewed 8723

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 ;
}
}
tailwind-css reactjs
3 Answers

Remove space after hover:

hover:bg-gray-300

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

user_35644480

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
}
user_45742810

Already Raised on GitHub

Tailwind doesn't currently support @applying classes that contain responsive or state prefixes.
It's described in more detail in the @apply documentation.

Similar issue raised on GitHub Useful reply from elpete and adamwathan.

I solved this problem by using normal CSS rules inside @layer directive. Not a good fix but it could be used.

user_155215900
Related