how to genearte class when ref in another svelte component

[zhihengGet]

so, i created a component called "ui "that is basically a wrapper for daisyUi

//ui.svelte
export variable   outline=Boolean 
//html 
<div class="alert alert-{outline ??"info"}">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  <span>New software update available.</span>
</div>

// then it is used like this

<Badge outline="false"/>

but it did not work, i believe tw cant generate alert-info style

[saadeghi]

Don't use dynamic class names (half-variable like btn-{$color}). If you do this, there is no way for Tailwind CSS to know what class names to generate.
Read more:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names