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中使用的类名一致。
以上就是Tailwind CSS自定义变体失效：为什么我的hover效果不起作用？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3182711.html
