jamsrui_composite_conditional_classname_merge_with_tailwind_conflict_resolution.ts

1import { composite } from "@jamsrui/composite";
2
3/**
4 * The composite function merges multiple class names, 
5 * handles conditional logic, and automatically resolves 
6 * Tailwind CSS conflicts.
7 */
8
9const isActive = true;
10const isDisabled = false;
11
12const className = composite(
13  "px-4 py-2 rounded-md",             // Base classes
14  "bg-blue-500 text-white",           // Primary styles
15  isActive && "ring-2 ring-blue-300", // Conditional string
16  {
17    "opacity-50 cursor-not-allowed": isDisabled, // Conditional object
18    "hover:bg-blue-600": !isDisabled,
19  },
20  "bg-red-500" // This will override 'bg-blue-500' due to Tailwind merge logic
21);
22
23console.log(className);
24// Output: "px-4 py-2 rounded-md text-white ring-2 ring-blue-300 hover:bg-blue-600 bg-red-500"