You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Argument of type'string | ClassArray | ClassDictionary | null | undefined' is not assignable to parameter of type'ClassNameValue'.
Type 'ClassArray' is not assignable to type'ClassNameValue'.
Type 'ClassValue[]' is not assignable to type'ClassNameArray'.
Type 'ClassValue' is not assignable to type'ClassNameValue'.
Type 'number' is not assignable to type'ClassNameValue'. (ts)
:'size-12',
cssClass,
)}
Reproduction
<script lang="ts">
import { twMerge } from 'tailwind-merge'
import type { HTMLButtonAttributes } from 'svelte/elements'
import type { Snippet } from 'svelte'
interface Props extends HTMLButtonAttributes {
children?: Snippet
}
let { class: cssClass, children, ...rest }: Props = $props()
</script>
<button {...rest} class={twMerge('rounded', cssClass)}>
{@render children?.()}
</button>
Describe the bug
Combining the latest clsx supporting
HTMLAttributes
with tailwind-merge creates type incompatibility.HTMLAttributes declared by svelte
Expected type from tailwind-merge
export type ClassNameValue = ClassNameArray | string | 0 | 0n | false | undefined | null
Error Logs
Reproduction
System Info
Severity
blocking an upgrade
Hacky workaround
One possibility is to redefine the
class
property as a common type (eg a simplestring
).The text was updated successfully, but these errors were encountered: