Tailwind CSS构建React项目报错hover:类不存在问题咨询

报错的核心诱因是你在@apply语句里手误输入了多余空格：hover: 变体前缀和后面的text-white类名被空格拆成了两部分，Tailwind 解析时会把单独的hover:识别成一个不存在的自定义类，直接触发你看到的报错。
你贴出的错误代码片段如下，问题点已经标注：

/* 问题点：hover: 后多了空格，把hover:text-white拆成了无效的hover: 和text-white两个片段 */
rounded-full hover: text-white hover:bg-purple-600 hover:border-transparent

Tailwind 所有的变体前缀（包括状态类hover:/focus:/active:、响应式断点md:/lg:、主题模式dark:等）都必须和后续的工具类名紧挨着书写，中间不能插入空格、换行，否则解析器无法识别为合法的带变体的工具类。
另外你代码里用//Index.css写注释的写法也不规范，原生CSS只支持/* 注释内容 */的块注释格式，用双斜杠写注释可能触发额外的CSS解析问题。

直接删除hover:和text-white之间的多余空格，同时把不规范的单行注释改成CSS标准块注释即可，修正后的完整代码如下：

/* 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报错，可以按以下顺序排查：

• 检查类名是否存在拼写错误，比如把text-white写成text-whte
• 检查带前缀的类名中间有没有多余空格、换行，把前缀和类名拆断
• 检查自定义类是否确实在对应@layer块内定义，或者有没有配置tailwind.config.js的content路径扫描不到对应文件的问题

内容的提问来源于stack exchange，提问作者Debabrata Saha