Tailwind CSS - class does not exist error

user_15363400 0
Viewed 1439

I am new to Tailwind CSS. I got this error while building a React project:

The hover: class does not exist. If hover: is a custom class, make sure it is defined within a @layer directive.

I found a similar problem on StackOverflow but it isn't helping me. Can anyone tell me why this is happening?

//Index.css 
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
    .btn-purple {
        @apply px-4 py-1 text-sm text-purple-600 font-semibold border border-purple-200 rounded-full hover: text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2;
    }
}
tailwind-css
2 Answers

It is not identifying the hover property because of space after hover: in text-white. Remove the space after the hover

hover:text-white
user_109623640

You'll have to make a new selector and then put all the hover elements in there.

.btn-purple {
    @apply classA classB;
}

.btn-purple:hover {
    @apply hoverClassC hoverClassD;
}

Make sure you don't put hover: in front of the hover classes though

user_198905180
Related