实现Tailwind 3中激活/非激活标签页的背景色切换

我正在把网站从Bootstrap迁移到Tailwind 3，需要替换Dropdown、Tabs、Accordion这类内置组件，目前在开发自定义评论编辑器。当前用纯CSS实现了标签页切换，核心代码如下：

[data-target] {
  scroll-margin-top: 10rem;
}

[data-target]:last-of-type + [role="tabpanel"], :target + [role="tabpanel"]{
  display: flex;
}

[role="tabpanel"], :target ~ [data-target]:last-of-type + [role="tabpanel"]{
  display: none;
}

现在想实现激活/非激活标签页的样式切换：

• 背景色在Tailwind的bg-color-0和bg-color-100之间切换
• 把border-b-color-0从原激活标签转移到新激活标签

我试过用隐藏<input>元素的纯CSS方案，但只能点击标签左上角的精确位置触发，没法点击标签任意区域。我知道最终要加JS处理ARIA属性，但想先搞清楚基础的背景色切换能不能纯CSS实现？如果不行，有没有可行的替代方案？

一、纯CSS可行方案：改进隐藏input的点击区域覆盖问题 #

你之前的隐藏input方案点击区域受限，是因为没有让<label>完全覆盖标签的可点击区域。调整结构和样式就能解决：

1. HTML结构调整：
   把每个标签包裹在<label>里，让<label>的for属性对应隐藏的<input>，同时让<label>占满整个标签的视觉空间：

   <div class="tabs-container">
     <!-- 隐藏的radio输入组 -->
     <input type="radio" name="tab-group" id="tab1" checked class="hidden">
     <input type="radio" name="tab-group" id="tab2" class="hidden">
     <input type="radio" name="tab-group" id="tab3" class="hidden">
   
     <!-- 标签栏 -->
     <div class="flex border-b">
       <label for="tab1" class="px-4 py-2 cursor-pointer w-full text-center">标签1</label>
       <label for="tab2" class="px-4 py-2 cursor-pointer w-full text-center">标签2</label>
       <label for="tab3" class="px-4 py-2 cursor-pointer w-full text-center">标签3</label>
     </div>
   
     <!-- 面板 -->
     <div class="tab-panel p-4">面板1内容</div>
     <div class="tab-panel p-4 hidden">面板2内容</div>
     <div class="tab-panel p-4 hidden">面板3内容</div>
   </div>
   

2. Tailwind+CSS结合实现激活样式：
   用CSS兄弟选择器关联input的checked状态和label、面板的样式：

   /* 激活标签的样式 */
   input[name="tab-group"]:checked + .flex label[for="tab1"],
   input[name="tab-group"]:checked + .flex label[for="tab2"],
   input[name="tab-group"]:checked + .flex label[for="tab3"] {
     @apply bg-color-0 border-b-2 border-b-color-0;
   }
   /* 非激活标签的样式 */
   .tabs-container label:not(:has(+ input:checked)) {
     @apply bg-color-100 border-b-transparent;
   }
   /* 面板显示逻辑 */
   input[name="tab-group"]:checked ~ .tab-panel {
     display: block;
   }
   input[name="tab-group"]:not(:checked) ~ .tab-panel {
     display: none;
   }
   

   或者直接用Tailwind的peer类（Tailwind v3+支持），不用自定义CSS：

   <input type="radio" name="tab-group" id="tab1" checked class="hidden peer">
   <label for="tab1" class="px-4 py-2 cursor-pointer w-full text-center peer-checked:bg-color-0 peer-checked:border-b-2 peer-checked:border-b-color-0 peer-not-checked:bg-color-100">标签1</label>
   

   这种方式可以让点击标签的任意区域都触发状态切换，完全纯CSS实现。

二、基于现有:target方案的纯CSS样式切换 #

如果不想改现有基于锚点的结构，也可以通过:target关联标签样式，但需要调整标签的href和对应元素的id：

1. 给每个标签添加对应的锚点目标：

   <div class="tabs">
     <a href="#tab1" class="tab-link px-4 py-2">标签1</a>
     <a href="#tab2" class="tab-link px-4 py-2">标签2</a>
     <a href="#tab3" class="tab-link px-4 py-2">标签3</a>
   </div>
   <!-- 锚点目标元素，放在面板前 -->
   <div id="tab1" class="tab-target hidden"></div>
   <div class="tab-panel p-4">面板1</div>
   <div id="tab2" class="tab-target hidden"></div>
   <div class="tab-panel p-4 hidden">面板2</div>
   <div id="tab3" class="tab-target hidden"></div>
   <div class="tab-panel p-4 hidden">面板3</div>
   

2. 用CSS兄弟选择器关联:target和标签样式：

   /* 默认非激活样式 */
   .tab-link {
     @apply bg-color-100 border-b-transparent;
   }
   /* 激活样式：通过锚点的target状态反向关联对应标签 */
   #tab1:target ~ .tabs .tab-link[href="#tab1"],
   #tab2:target ~ .tabs .tab-link[href="#tab2"],
   #tab3:target ~ .tabs .tab-link[href="#tab3"] {
     @apply bg-color-0 border-b-2 border-b-color-0;
   }
   /* 面板显示逻辑保留原有代码 */
   

   这种方式不需要input，但缺点是页面会有锚点跳转的滚动（可以用scroll-margin-top优化），且刷新页面会保留锚点状态。

三、极简JS替代方案（如果纯CSS场景受限） #

如果上述纯CSS方案不符合你的结构需求，极简JS就能实现样式切换，代码量很小：

// 获取所有标签链接
const tabLinks = document.querySelectorAll('[data-target]');
tabLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    // 移除所有标签的激活样式
    tabLinks.forEach(l => {
      l.classList.remove('bg-color-0', 'border-b-color-0');
      l.classList.add('bg-color-100');
    });
    // 给当前点击的标签添加激活样式
    link.classList.remove('bg-color-100');
    link.classList.add('bg-color-0', 'border-b-color-0');
    // 面板显示逻辑可保留原有CSS，或在此处理
  });
});

这种方案可以完全自定义样式切换逻辑，同时方便后续添加ARIA属性的处理。

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