vite bundle skeleton ui -- safelisting skeleton-tailwind utility classes

Question

I am trying to use SkeletonUI for my Svelte project (without sveltekit). I create a bundle using Vite for all the SkeletonUI tailwind directives (badge, variant-filled), and skeletonUI svelte components (Avatar, AppBar) etc. The svelte components are rendered properly but the skeleton tailwind directives are not present in the bundle. I tried tinkering with safelist options with the purgeCss but that doesn't seem to work. The complete working example is here.

• Sample SkeletonUI component and utilty classes
• tailwind.config.ts

The vite.config.ts looks as follows:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';

import postcss from './postcss.config.ts';

// https://vitejs.dev/config/
export default defineConfig({
   plugins: [svelte(),
   purgeCss({
            safelist: ['badge', 'btn-icon', 'variant-filled', 'fa-solid', 'fa-skull'],
        }
        )
   ],
   css: { postcss

},
   build: {
    lib: {
      entry: 'src/main.ts', // Specify the entry file for the bundle
      name: 'jpComponentBuilder', // Specify the global variable name for the bundle
      formats:['iife'],
      fileName: 'bundle', // Specify the name of the bundle file
    },
    rollupOptions: {
      output: {
      },
    },
  },
  
  });

Not sure what am I missing.

index_bundle.html is the runner which loads the bundle. The abc.js creates the Skeleton component but no skeleton utility classes are working. Tailwind utility classes and skeleton svelton svelte components are working.