I am using flowbite / tailwind tabs interactive and the tab display functionality is working as expected. I would expect though that if you click on a new tab the old tab (bg-color) would become inactive and the new tab (bg-color) would be active(dark) for each tab.
What is happening is the profile tab loads active with a (active)dark background. When you roll over the dashboard tab it highlights as it should (dark background) but when you click dashboard tab the Profile tab stays bg-color dark/active, the dashboard text becomes active but the bg-color of the dashboard tab does not change to active(darker color).
'use client'
import Image from 'next/image';
import Link from 'next/link';
import React, { useEffect, useRef } from 'react';
import { initFlowbite} from 'flowbite';
export default function Winners() {
useEffect(() => {
initFlowbite();
return () => {
};
}, []);
return (
<>
<ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
id="default-tab"
data-tabs-toggle="#default-tab-content"
role="tablist">
<li className="me-2">
<button
aria-current="page"
className="inline-block p-4 text-blue-600 bg-gray-200 rounded-t-lg
dark:bg-gray-800 dark:text-blue-500"
id="profileTab"
data-tabs-target="#profile" type="button"
role="tab" aria-controls="profile"
aria-selected="false">Profile</button>
</li>
<li className="me-2">
<button
className="inline-block p-4 rounded-t-lg
hover:text-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800
dark:hover:text-gray-300"
id="dashboard-tab"
data-tabs-target="#dashboard" type="button"
role="tab" aria-controls="dashboard"
aria-selected="false">Dashboard</button>
</li>
</ul>
<div id="default-tab-content">
<div className="hidden px-2 md:px-4 rounded-lg bg-white dark:bg-gray-800"
id="profile"
role="tabpanel"
aria-labelledby="profileTab">
<p className=" text-gray-700 dark:text-gray-400">
theis is the provile tabe</p>
</div>
<div className="hidden px-2 md:px-4 rounded-lg bg-white dark:bg-gray-800"
id="dashboard"
role="tabpanel"
aria-labelledby="dashboard-tab">
<p className="text-gray-700 dark:text-gray-400">
dashbord sdfsdf sdfsdfs ssdsfsdfsdfsdf</p>
</div>
</div>
</>
)
}
I have tried focus:bg-black for testing which does work but on the initial load of the page the profile background color is not dark as it should be.
I have also tried data-active-classes="bg-black" the data active classes have absolutely no effect when placed in the button.
As per Flowbite's documentation:
Customize active tab
You can use the
aria-selected:{class}selector to style the currently active tab button element.
Thus, you could consider reworking your classes to have the active classes with aria-selected:, like:
const { useEffect, useRef } = React;
function Winners() {
useEffect(() => {
initFlowbite();
return () => {};
}, []);
return (
<React.Fragment>
<ul
className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
id="default-tab"
data-tabs-toggle="#default-tab-content"
role="tablist"
>
<li className="me-2">
<button
aria-current="page"
className="inline-block p-4 rounded-t-lg
hover:text-gray-600 hover:bg-gray-200
dark:hover:bg-gray-800 dark:hover:text-gray-300
aria-selected:text-blue-600 aria-selected:bg-gray-200
dark:aria-selected:bg-gray-800 dark:aria-selected:text-blue-500"
id="profileTab"
data-tabs-target="#profile"
type="button"
role="tab"
aria-controls="profile"
aria-selected="false"
>
Profile
</button>
</li>
<li className="me-2">
<button
className="inline-block p-4 rounded-t-lg
hover:text-gray-600 hover:bg-gray-200
dark:hover:bg-gray-800 dark:hover:text-gray-300
aria-selected:text-blue-600 aria-selected:bg-gray-200
dark:aria-selected:bg-gray-800 dark:aria-selected:text-blue-500"
id="dashboard-tab"
data-tabs-target="#dashboard"
type="button"
role="tab"
aria-controls="dashboard"
aria-selected="false"
>
Dashboard
</button>
</li>
</ul>
<div id="default-tab-content">
<div
className="hidden px-2 md:px-4 rounded-lg bg-white dark:bg-gray-800"
id="profile"
role="tabpanel"
aria-labelledby="profileTab"
>
<p className=" text-gray-700 dark:text-gray-400">
theis is the provile tabe
</p>
</div>
<div
className="hidden px-2 md:px-4 rounded-lg bg-white dark:bg-gray-800"
id="dashboard"
role="tabpanel"
aria-labelledby="dashboard-tab"
>
<p className="text-gray-700 dark:text-gray-400">
dashbord sdfsdf sdfsdfs ssdsfsdfsdfsdf
</p>
</div>
</div>
</React.Fragment>
);
}
ReactDOM.createRoot(document.getElementById("app")).render(<Winners />);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js" integrity="sha512-khqZ6XB3gzYqfJvXI2qevflbsTvd+aSpMkOVQUvXKyhRgEdORMefo3nNOvCM8584/mUoq/oBG3Vb3gfGzwQgkw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app"></div>