Skip to content

[bug]: Only font is not applicable when TabsTrigger is active #9466

@JungYeonHwi

Description

@JungYeonHwi

Describe the bug

const tabsTriggerVariants = cva(
  'font-body-l transition-all duration-200 ease-in-out data-[state=active]:font-body-l-bold',
);

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(tabsTriggerVariants(), className)}
    {...props}
  />
));

In the active state, other attribute values, such as different colors or borders, are applied, but not only in the font, but only the default attribute values.

Affected component/components

tabs.tsx

How to reproduce

Install shadcn/ui
Run:
bunx --bun shadcn@latest add tabs
Use tabs in a component
Start the dev server

Codesandbox/StackBlitz link

No response

Logs

System Info

System / Runtime

Node.js (Current): v20.16.0

Frontend Framework

Next.js: v15.5.7

TypeScript: v5.5.4

tailwindcss: v4.1.18

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions