Tailwind CSS自定义变体失效问题详解
本文分析一个Tailwind CSS自定义变体失效的案例，解释hoverColor和hoverOn变体为何失效。
案例中，试图自定义一个hover状态的变体，并在tailwind.config.js中使用addVariant函数注册名为hoverColor的自定义变体。然而，modifySelectors函数返回的类名却是hoverOn开头，与注册名称不符。
代码中，hoverColor变体通过addVariant注册，其modifySelectors函数生成.${e(hoverOn${separator}${className})}:hover这样的选择器。因此，class="hoverColor:text-red-600"最终生成.hoverOn\\:text-red-600:hover样式。
立即学习“前端免费学习笔记（深入）”；
HTML代码中使用了class="hoverOn:text-red-600"和class="hoverColor:text-red-600"两个类。class="hoverOn:text-red-600"由于hoverOn并非预定义或已注册的变体，Tailwind CSS无法识别并生成样式。
class="hoverColor:text-red-600"虽然生成了.hoverOn\\:text-red-600:hover样式，但HTML中未使用此类名。生成的CSS样式仅在元素类名完全匹配时生效，而HTML中使用的hoverColor:text-red-600不会被编译成.hoverOn\\:text-red-600:hover。
因此，hoverOn:text-red-600和hoverColor:text-red-600都无法实现hover变色效果。根本原因是modifySelectors函数生成的类名与HTML中使用的类名不匹配，以及hoverOn本身并非有效的Tailwind CSS变体。 只有正确注册并使用生成的类名.hoverOn\\:text-red-600，才能使hover效果生效。 这强调了使用自定义变体时，必须确保addVariant函数中modifySelectors返回的选择器与HTML中使用的类名一致。
