Tailwind CSS provides atomic design utilities, but dynamically combining classes inside Svelte components can cause layout rendering bugs due to class precedence.
The Conflict Problem
Consider a button component that defines a default padding class, which you try to override externally:
<!-- Button.svelte -->
<button class="bg-primary p-4 {$$props.class || ''}"> Click me </button>If you render it with:
<button class="bg-red-500 p-2" />The resulting HTML compiles to class="bg-primary p-4 p-2 bg-red-500". Because p-4 appears after p-2 in the compiled stylesheet rules, the default padding p-4 will take precedence, overriding your custom padding option!
The Solution: Class Merging
To solve this, @doyzfin/common provides the cn class merger combining clsx and tailwind-merge:
import { cn } from '@doyzfin/common';
const className = cn('bg-primary p-4', 'p-2 bg-red-500');
// Output result: 'bg-red-500 p-2'Using this utility ensures that the last specified Tailwind class of a given category automatically overrides earlier ones, making components fully composable and customizable!