Почему он говорит, что класс " hover:` не существует. Если "hover:" является пользовательским классом, убедитесь, что он определен в директиве "@layer"?

#reactjs #tailwind-css

Вопрос:

Я новичок в интерфейсной разработке и пытаюсь создать новый проект 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 ;
}
}

1. вы установили пакет для tailwind-css

2. @Skysoft13, да, я знаю 🙂

3. Между «наведением:» и стилем не должно быть пробела. Например, hover: bg-gray-100 должно быть hover:bg-gray-100

4. @CraigE, tnx так много 🙂

Ответ №1:

Удалите пробел после наведения курсора:

 hover:bg-gray-300

Совет:: У меня та же проблема с сохранением без формата в коде visual studio ctrl k then ctrl shift s

Ответ №2:

В моем случае я скопировал и вставил код, и после него было двоеточие : @apply , т. е.

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