twMerge outputs empty class

[shinokada]

I have the following Svelte component. But it outputs no class and I'm not suer why.

I appreciate any help.

<script lang="ts">
  import { twMerge } from 'tailwind-merge'

  export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
  let footerClass = twMerge([
    {
      'bg-gray-800': footerType === 'sitemap',
      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
        footerType === 'default',
    },
    $$props.class
  ])
</script>
<footer
  {...$$restProps}
  class={footerClass}>
  <slot />
</footer>

[dcastil]

Hey @shinokada! 👋

tailwind-merge doesn't support the object syntax (here more info on why).

Does it work if you rewrite the call to twMerge to this?

twMerge(
    footerType === 'sitemap' && 'bg-gray-800',
    footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800',
    footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800',
    footerType === 'default' &&
        'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800',
    $$props.class,
)

[shinokada]

Thanks. I will try it. I was using switch statement.

  export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
  let styles = '';

switch (footerType) {
    case 'sitemap':
      styles = 'bg-gray-800';
      break;
    case 'socialmedia':
      styles = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
      break;
    case 'logo':
      styles = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
      break;
    case 'default':
      styles =
        'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
      break;
  }

  let footerClass = twMerge([styles, $$props.class]);

[shinokada]

Thanks it works.
tailwind-merge is great! I just converted classnames to tailwind-merge for Flowbite-Svelte. It solves many problems and makes the UI API simpler.