如何用Tailwind CSS实现链接active类或hover状态下的样式？

方法1：使用Tailwind CSS自定义变体+hover变体 #

直接通过Tailwind的类实现“拥有active类”或“hover状态”下的样式，代码如下：

<a href="#" class="[&.active]:font-semibold hover:font-semibold">链接文本</a>

• [&.active]:font-semibold：匹配拥有.active类的链接，应用半粗体字体
• hover:font-semibold：匹配处于hover状态的链接，应用半粗体字体
  两者是“或”逻辑，满足任一条件就生效。

方法2：使用自定义CSS #

如果不想依赖Tailwind的自定义语法，也可以直接写传统CSS：

/* 在你的样式文件中添加 */
a.active, a:hover {
  font-weight: 600; /* 对应Tailwind的font-semibold权重值 */
}

HTML部分只需保留框架动态添加的active类即可，无需额外Tailwind类：

<a href="#">链接文本</a>

你之前写法无效的原因 #

你写的<a href="#" class="active [&.active]:hover:font-semibold"存在两个问题：

1. 语法逻辑错误：[&.active]:hover:font-semibold是“且”逻辑，仅当链接同时拥有active类且处于hover状态时才生效，不符合你要的“或”需求
2. 多余的active类：手动添加的active类会让链接默认处于激活状态，而如果active类是框架动态设置的，无需手动写入class中

内容的提问来源于stack exchange，提问作者Craig Smitham