Active tab is not highlighting

[kibria-shaped]

Basically I copied whole Tab example, but Active tabs not highlighted

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Make changes to your account here. Click save when you're done.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              Change your password here. After saving, you'll be logged out.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="current">Current password</Label>
              <Input id="current" type="password" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="new">New password</Label>
              <Input id="new" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save password</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

[dan5py]

We need more info too understand your problem, can you provide a working example were the problem occurs?

[poipiii]

Any luck fixing this ??? im running into this issue too

[BaileySimrell]

I'm also running into this issue

[BaileySimrell]

I'm also running into this issue

OK, I found a way to get things working by editing the base tabs.tsx code to use Tailwind instead of data-state attributes to handle color. I figure this is some sort of bug/conflict with @radix-ui/react-tabs, but I'm. not sure.

Below is a screenshot of my workaround diff in Fork:

Most likely due to existing conflicts with @radix-ui/react-tabs and Tailwind in the code, I still couldn't get the empty state working without adding some custom css:

[mahamaad]

i have same problem i just add active color manually, create useState like this and add condition to classname

[schmoli]

So i had this problem, but for me, I had accidentally imported TabsTrigger from radix instead of from the new component. I kind if wish other names were used as there are a LOT of component names that match radix and by default my editor wants to import them it seems.

[grafficmedia]

You need to ensure you have CSS variables set like --background which is expecting an HSL value, like so:

:root {
  --background: 217.78, 19.71%, 26.86%;
}

Once doing this, the highlighting worked as expected.

[grafficmedia]

I will say that the documentation of ShadCN definitely needs to be improved to highlight this requirement. Also it would be extremely helpful if each component page had a Props list.

[sanchezfdezjavier]

I've managed to make this work by adding className="data-[state=active]:bg-white" to the <TabsTrigger.

🤔 I'm not sure why this fixes the issue, but also toggles the shadow correctly!

<TabsTrigger className="data-[state=active]:bg-white" value="raw">
  Edit
</TabsTrigger>
<TabsTrigger
  className="data-[state=active]:bg-white"
  value="formatted"
>
  Formatted
</TabsTrigger>

[marcwickenden]

For anyone struggling with this too, for me it turned out to be my version of Tailwind. I was on something like 3.1 and I upgraded to latest 3.4 and it now works fine. So if the data attribute is being set correctly but the class isn't applying it's likely it's just that Tailwind isn't handling that. HTH.

[tanifort]

I had the same issue, but simply updating my tailwind-css solved it!

[crowscript]

In parent tab Tabs in attr defaultValue you setup which tab item will be active: <Tabs defaultValue="valueOfTabItem">

[pramodpurushan77]

I've managed to make this work by adding className="data-[state=active]:bg-white" to the <TabsTrigger.

🤔 I'm not sure why this fixes the issue, but also toggles the shadow correctly!

<TabsTrigger className="data-[state=active]:bg-white" value="raw">
  Edit
</TabsTrigger>
<TabsTrigger
  className="data-[state=active]:bg-white"
  value="formatted"
>
  Formatted
</TabsTrigger>

This worked bro. Thankyou

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.