Apply twJoin, twMerge

Looking at https://github.com/dcastil/tailwind-merge/blob/v1.13.1/docs/when-and-how-to-use-it.md#how-to-use-it I placed the "winning" class at the end for twMerge
This commit is contained in:
Tobias 2023-06-15 05:38:52 +02:00
parent 9c96f6534f
commit b55d976492
16 changed files with 52 additions and 43 deletions

View file

@ -2,6 +2,7 @@
import { createEventDispatcher } from "svelte"
import BaseUIElement from "../BaseUIElement"
import Img from "./Img"
import { twJoin, twMerge } from "tailwind-merge"
export let imageUrl: string | BaseUIElement = undefined
export let message: string | BaseUIElement = undefined
@ -10,15 +11,14 @@
extraClasses?: string
} = {}
let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11")
let imgClasses = twJoin("block justify-center shrink-0 mr-4", options?.imgSize ?? "h-11 w-11")
const dispatch = createEventDispatcher<{ click }>()
</script>
<button
class={(options.extraClasses ?? "") + " secondary no-image-background"}
target={options?.newTab ? "_blank" : ""}
on:click={(e) => dispatch("click", e)}
>
class={twMerge(options.extraClasses, "secondary no-image-background")}
on:click={(e) => dispatch("click", e)}>
<slot name="image">
{#if imageUrl !== undefined}
{#if typeof imageUrl === "string"}