React Flow UI BaseHandle does not work #5673
Description
What platform were you using when you found the bug?
Most recent react flow, fresh vite + tailwindcss + shadcn-ui setup
Live code example
No response
Describe the Bug
React Flow's CSS is overriding Tailwind classes for the base handle and they do not render as intended.
Marking the tailwind classes as important fixes the issue.
import type { ComponentProps } from "react";
import { Handle, type HandleProps } from "@xyflow/react";
import { cn } from "@/lib/utils";
export type BaseHandleProps = HandleProps;
export function BaseHandle({
className,
children,
...props
}: ComponentProps<typeof Handle>) {
return (
<Handle
{...props}
className={cn(
"!h-[11px] !w-[11px] !rounded-full !border !border-slate-300 !bg-slate-100 transition dark:!border-secondary dark:!bg-secondary",
className,
)}
>
{children}
</Handle>
);
}Steps to reproduce the bug or issue
Basic setup as described by the documentation
Expected behavior
BaseHandle should render as intended
Screenshots or Videos
className={cn(
"h-[11px] w-[11px] rounded-full border border-slate-300 bg-slate-100 transition dark:border-secondary dark:bg-secondary",
className,
)}
className={cn(
"!h-[11px] !w-[11px] !rounded-full !border !border-slate-300 !bg-slate-100 transition dark:!border-secondary dark:!bg-secondary",
className,
)}
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels