tailwind-css - Tailwind CSS - 类不存在错误

Question

我是 Tailwind CSS 的新手。我在构建 React 项目时遇到了这个错误:

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

我在 StackOverflow 上发现了类似的问题，但它对我没有帮助。谁能告诉我为什么会这样？

//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;
    }
}

Answer 1

由于 text-white 中 hover: 后的空格，它无法识别悬停属性。去掉悬停后的空格

hover:text-white