Tailwind实现移动端Tab按钮初始默认选中状态

1. 确保状态默认选中第一个选项 #

先确认状态初始化时默认指向第一个模块，保证逻辑上默认激活「People」标签：

const [elementSelected, setElementSelected] = useState(AboutSections[0]);

2. 实现移动端专属的激活样式 #

因为要求仅针对移动端生效，利用Tailwind「移动端优先」的特性（默认样式对应移动端，大屏样式需加前缀），给选中状态的按钮添加专属样式：

方案一：修改自定义工具类（推荐）

在你的.control__button工具类中，新增移动端激活状态样式，同时保留原有hover/focus逻辑：

.control__button {
  @apply capitalize border-2 rounded-md text-center px-4 py-2 text-eco-green 
  bg-white border-eco-green hover:bg-eco-green-med hover:border-eco-green-dark 
  hover:text-white focus:bg-eco-green focus:border-eco-green-dark focus:text-white     
  focus:hover:text-slate-200 dark:bg-black dark:text-eco-green font-poppins;
}

/* 移动端专属激活样式 */
.control__button.active {
  @apply bg-eco-green text-white border-eco-green-dark;
}

/* 大屏下重置为默认样式（按需添加） */
@media (min-width: 768px) {
  .control__button.active {
    @apply bg-white text-eco-green border-eco-green;
  }
}

方案二：直接在JSX中用条件类

如果不想修改CSS，可直接通过状态判断给按钮添加移动端激活类：

<button
  className={`control__button ${elementSelected === AboutSections[0] ? 'bg-eco-green text-white border-eco-green-dark' : ''} md:bg-white md:text-eco-green md:border-eco-green`}
  onClick={() => setElementSelected(AboutSections[0])}
>
  People
</button>
<button
  className={`control__button ${elementSelected === AboutSections[1] ? 'bg-eco-green text-white border-eco-green-dark' : ''} md:bg-white md:text-eco-green md:border-eco-green`}
  onClick={() => setElementSelected(AboutSections[1])}
>
  Earnings
</button>
<button
  className={`control__button ${elementSelected === AboutSections[2] ? 'bg-eco-green text-white border-eco-green-dark' : ''} md:bg-white md:text-eco-green md:border-eco-green`}
  onClick={() => setElementSelected(AboutSections[2])}
>
  Projects
</button>

3. 完整代码示例 #

结合状态与样式的完整实现：

import { useState } from 'react';

// 假设AboutSections是你的模块数组
const AboutSections = ['People', 'Earnings', 'Projects'];

export default function MobileTabs() {
  const [elementSelected, setElementSelected] = useState(AboutSections[0]);

  return (
    <section className='grid border-2 border-eco-green rounded-md'>
      <div className='grid grid-cols-3 p-1 gap-1'>
        <button
          className={`control__button ${elementSelected === AboutSections[0] ? 'active' : ''}`}
          onClick={() => setElementSelected(AboutSections[0])}
        >
          People
        </button>
        <button
          className={`control__button ${elementSelected === AboutSections[1] ? 'active' : ''}`}
          onClick={() => setElementSelected(AboutSections[1])}
        >
          Earnings
        </button>
        <button
          className={`control__button ${elementSelected === AboutSections[2] ? 'active' : ''}`}
          onClick={() => setElementSelected(AboutSections[2])}
        >
          Projects
        </button>
      </div>

      <article>
        <AboutElement elementSelected={elementSelected} />
      </article>
    </section>
  );
}

关键说明 #

• 借助Tailwind移动端优先特性，默认激活样式仅在移动端生效，大屏可通过媒体查询重置回默认样式（按需选择）。
• 通过elementSelected状态动态控制按钮激活状态，确保点击切换时样式同步更新。
• 完整保留原有hover和focus交互样式，不影响用户体验。

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