如何自定义Flowbite React Tabs的颜色与边框样式？

Flowbite的Tabs组件基于Tailwind CSS构建，完全可以通过Tailwind类或自定义主题来修改样式，以下是两种实用方法：

方法一：直接通过Tailwind类覆盖（快速生效） #

针对下划线样式的Tabs，你可以直接在组件上添加Tailwind的状态类和颜色类，精准修改文字、边框颜色：

修改后的代码示例 #

import { Tabs } from "flowbite-react";     

export default function CoursesTab() {
  return (
    <>
      {/* 自定义整个Tabs组的底部边框颜色 */}
      <Tabs.Group 
        aria-label="Tabs with underline" 
        style="underline" 
        className="justify-between border-b border-gray-300"
      >
        {categories.map((category, index) => {
          return (
            <Tabs.Item 
              key={index} 
              title={category.name}
              {/* 自定义标签文字的默认、hover、激活态颜色，以及激活态的下划线颜色 */}
              className="text-gray-700 hover:text-indigo-600 data-[state=active]:text-indigo-600 data-[state=active]:border-indigo-600"
            >
              {category.name} content
            </Tabs.Item>
          );
        })}
      </Tabs.Group>
    </>
  );
}

类说明 #

• border-b border-gray-300：修改Tabs组的底部边框颜色
• text-gray-700：标签页默认文字颜色
• hover:text-indigo-600：鼠标悬停时的文字颜色
• data-[state=active]:text-indigo-600：激活态标签的文字颜色
• data-[state=active]:border-indigo-600：激活态标签的下划线颜色

方法二：自定义Tailwind主题（全局生效） #

如果想要所有Tabs组件统一使用自定义样式，可以在tailwind.config.js中扩展Flowbite的主题配置：

module.exports = {
  theme: {
    extend: {
      colors: {
        // 先定义你的自定义色值
        tab: {
          active: '#4F46E5', // 替换成你想要的激活态颜色
          inactive: '#6B7280', // 未激活态文字颜色
          border: '#E5E7EB' // 边框颜色
        }
      }
    },
    plugins: [
      require('flowbite/plugin')({
        theme: {
          tabs: {
            underline: {
              // 配置Tabs组的样式
              group: {
                borderColor: 'border-tab-border'
              },
              // 配置单个标签项的样式
              item: {
                inactive: {
                  color: 'text-tab-inactive',
                  hover: {
                    color: 'text-tab-active'
                  }
                },
                active: {
                  color: 'text-tab-active',
                  borderColor: 'border-tab-active'
                }
              }
            }
          }
        }
      })
    ]
  }
}

配置完成后，所有下划线样式的Tabs会自动应用这些自定义颜色，无需再给单个组件加类。

注意事项 #

• 确保Tailwind CSS开启了JIT模式，这样data-[state=active]这类动态状态类才能被正确编译
• 如果样式不生效，检查是否有类优先级冲突，可临时用!important排查，但建议优先调整类的书写顺序

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