add cn helper

package.json

@@ -59,6 +59,7 @@
 		"rxjs": "^7.8.1",
 		"shiki": "^1.1.6",
 		"svelte-inview": "^4.0.2",
+		"tailwind-merge": "^2.3.0",
 		"ts-pattern": "^5.0.8"
 	}
 }

pnpm-lock.yaml

@@ -47,6 +47,9 @@ dependencies:
   svelte-inview:
     specifier: ^4.0.2
     version: 4.0.2(svelte@4.2.11)
+  tailwind-merge:
+    specifier: ^2.3.0
+    version: 2.3.0
   ts-pattern:
     specifier: ^5.0.8
     version: 5.0.8
@@ -137,6 +140,13 @@ packages:
     resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
     dev: true
 
+  /@babel/runtime@7.24.5:
+    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+    dev: false
+
   /@esbuild/aix-ppc64@0.19.12:
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
@@ -1656,6 +1666,10 @@ packages:
     dependencies:
       picomatch: 2.3.1
 
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+    dev: false
+
   /rehype-slug@6.0.0:
     resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
     dependencies:
@@ -1960,6 +1974,12 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
   /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:

src/lib/Helper.mjs

@@ -17,6 +17,8 @@ import {
 import { inview } from 'svelte-inview'
 import { pick } from 'remeda'
 import { writable } from 'svelte/store'
+import { twMerge } from 'tailwind-merge'
+import clsx from 'clsx'
 
 /**
  * Fade: The initial opacity from 0 to 1.
@@ -236,3 +238,11 @@ export function isIntersecting(rect1, rect2) {
 		rect2.coordinates[1] + rect2.size < rect1.coordinates[1]
 	)
 }
+
+/**
+ * Merge Tailwind classes
+ * @param {import('clsx').ClassValue} classes
+ */
+export function cn(...classes) {
+	return twMerge(clsx(classes))
+}

src/lib/components/3dCard/CardBody.svelte

@@ -1,5 +1,12 @@
+<script lang="ts">
+	import { cn } from '$lib/Helper.mjs'
+</script>
+
 <div
-  class={`h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] ${$$restProps.class}`}
+	class={cn(
+		`h-96 w-96 [transform-style:preserve-3d]  [&>*]:[transform-style:preserve-3d] `,
+		$$restProps?.class
+	)}
 >
-  <slot />
+	<slot />
 </div>

src/lib/components/Button.svelte

@@ -1,12 +1,12 @@
 <script>
-	import clsx from 'clsx'
+	import { cn } from '$lib/Helper.mjs'
 
 	/** @type { 'md'|'lg'|'xl'}*/
 	export let size = 'md'
 	/** @type { 'primary'|'outline'|'fancyOutline' }*/
 	export let type = 'primary'
 
-	$: classes = clsx(
+	$: classes = cn(
 		'animate  rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
 		'primary' == type && 'bg-slate-200 text-black',
 		'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',