Tailwind CSS自定义变体失效：问题分析与解决方案
本文剖析一个Tailwind CSS自定义变体失效的案例，并提供解决方案。案例中，尝试自定义hoverColor变体以实现鼠标悬停时文本颜色变化，但实际效果未达预期。
问题在于tailwind.config.js中自定义变体的实现与index.html中引用方式不一致。tailwind.config.js中的modifySelectors函数为hoverColor变体生成的类名以hoverOn开头，例如.hoverOn\\:text-red-600:hover。然而，index.html中使用的类名却是hoverOn:text-red-600和hoverColor:text-red-600。
这导致：
立即学习“前端免费学习笔记（深入）”；
-
hoverOn:text-red-600：未注册hoverOn变体，Tailwind CSS不会生成样式。 -
hoverColor:text-red-600：虽然注册了hoverColor，但由于生成的类名是.hoverOn\\:text-red-600:hover，只有当元素类名为.hoverOn\\:text-red-600时，鼠标悬停才会触发该样式，使文本变红。而index.html中未使用.hoverOn\\:text-red-600类名。
因此，index.html中的元素类名均未正确引用生成的样式，导致悬停效果失效。
解决方法：确保tailwind.config.js中自定义变体生成的类名与index.html中使用的类名一致，或者调整modifySelectors函数的返回值，使其与index.html中的类名匹配。 需注意生成的CSS类名包含转义字符\\。
预定义变体hocus:text-green-500则会生成.hocus\\:text-green-500:focus和.hocus\\:text-green-500:hover两个样式，符合预期。
根本原因是自定义变体生成的类名与实际使用类名不匹配。 正确的做法是修改tailwind.config.js或index.html，使其保持一致。
