Intermediate
Write cn() and fix the button overrides
The Button joins its base classes with the caller's className, so the overrides on Delete (id="danger") and Wide (id="wide") don't work: the base bg-teal-600 and px-4 still win.
Write twMerge(classes): split the string, and when two classes have the same group (use the provided groupOf), keep only the last one, preserving order otherwise. Then write cn(...inputs) that joins truthy inputs (strings, or objects like { "opacity-50": disabled }) and passes the result through twMerge.
Use cn(base, className) in Button. The CSS tab stands in for Tailwind's generated CSS.
What Check tests
- Save keeps all its base classes
- Delete has
bg-rose-600and notbg-teal-600 - Delete really is rose-coloured
- Wide has
px-6and notpx-4, and keepspy-2 - No stray spaces or empty classes in Save's className
cnhandles an object input
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.