Tailwind CSS 自定义变体 "hoverColor" 为什么不生效？

Tailwind CSS 自定义变体为何不生效？

针对提供的项目 Demo，自定义变体 "hoverColor" 无法生效的原因如下：

• index.html 中的类名错误：
  两个

  元素的类名应使用生成的 真实的样式名，而不是直接使用 "hoverColor:text-red-600" 或 "hoverOn:text-red-600"。

• 没有 hoverOn 变体：
  根据代码，自定义变体为 "hoverColor"，而 index.html 中的类名使用 "hoverOn:text-red-600"，这将不会匹配任何变体。

真实的样式名是什么？

真实的样式名由 addVariant 中提供的 modifySelectors 函数生成。具体来说：

• "hoverColor:text-red-600" 将转换为 ".hoverOn:text-red-600:hover"
• "hoverOn:text-red-600" 将转换为 ".hoverOn:text-red-600:hover"

因此，这两个类名应分别更新为 ".hoverOn:text-red-600:hover"。

相关文档

有关 Tailwind CSS 变体的更多文档，请参阅官方网站：

• [Tailwind CSS Variants](https://tailwindcss.com/docs/variants)

以上就是Tailwind CSS 自定义变体 "hoverColor" 为什么不生效？的详细内容，更多请关注硕下网其它相关文章！