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

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《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)

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。