TailwindCSS 3.1版本下如何启用active变体？

问题根源 #

你使用的active:text-pink-800对应CSS原生的:active伪类，这个样式只在鼠标按下元素的瞬间生效，松开鼠标就会消失。而你要的是标签切换后保持的持久激活状态，这不属于:active的作用范围，所以样式不生效。

解决方案 #

方案1：自定义类 + JS控制 #

1. 在项目里添加自定义激活样式（可以写在全局CSS文件，或者用Tailwind的@layer）：

@layer utilities {
  .tab-active {
    color: #9333ea; /* 换成你想要的紫色 */
  }
}

2. 修改HTML，移除active:text-pink-800，保留hover等样式：

<button class="tablinks" onclick="aboutSec(event, 'About')" id="default">
  <p class="hover:text-yellow-500 transition text-3xl font-bold p-5">About</p>
</button>

3. 调整你的aboutSec函数，确保切换标签时给对应<p>元素添加/移除.tab-active类：

function aboutSec(event, tabName) {
  // 先移除所有标签的激活类
  const tabContents = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].querySelector("p").classList.remove("tab-active");
  }
  // 给当前点击的标签添加激活类
  event.currentTarget.querySelector("p").classList.add("tab-active");
  // 其余标签内容切换逻辑保持不变...
}

方案2：Tailwind data属性变体 + JS控制 #

1. 修改Tailwind配置，新增data-active变体：

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      textColor: ["hover", "data-active"],
    },
  },
  plugins: [],
}

2. 修改HTML，把active:text-pink-800替换为data-[active=true]:text-purple-800：

<button class="tablinks" onclick="aboutSec(event, 'About')" id="default">
  <p class="data-[active=true]:text-purple-800 hover:text-yellow-500 transition text-3xl font-bold p-5">About</p>
</button>

3. 调整JS函数，通过dataset控制激活状态：

function aboutSec(event, tabName) {
  // 先移除所有标签的激活状态
  const tabContents = document.getElementsByClassName("tablinks");
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].querySelector("p").dataset.active = "false";
  }
  // 给当前点击的标签设置激活状态
  event.currentTarget.querySelector("p").dataset.active = "true";
  // 其余标签内容切换逻辑保持不变...
}

额外检查 #

确保你的JS函数正确遍历了所有标签元素，并且目标元素（<p>）被正确选中。如果激活状态是加在父按钮上，那样式和JS选择器也要对应调整。

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